html2canvas を使用してページを画像に変換し、canvas2image を使用してダウンロードします。

以前、<a> の download 属性を使用してダウンロードする方法をインターネットで見つけました。確かに非常に簡単で便利ですが、この方法は IE をサポートしていないため、別の方法を探すしかありませんでした。

この例で使用されているバージョン:

• [email protected]
• [email protected]

インストール

 npm install html2canvas Canvas2image --save

導入

 import html2canvas from 'html2canvas';require('./canvas2image.js');

Canvas2image.js をウィンドウに関連付けられるように変更する必要があります

 (function($){ Canvas2Image = function () { ... }}

_dataURL を使用してエコーすることができ、Canvas2Image.saveAsPNG(canvas) が直接ダウンロードします。

Canvas2Image は次のメソッドを提供します。

 Canvas2Image.saveAsImage(canvasObj, 幅, 高さ, 種類)Canvas2Image.saveAsPNG(canvasObj, 幅, 高さ)Canvas2Image.saveAsJPEG(canvasObj, 幅, 高さ)Canvas2Image.saveAsGIF(canvasObj, 幅, 高さ)Canvas2Image.saveAsBMP(canvasObj, 幅,高さ)Canvas2Image.convertToImage(canvasObj, 幅, 高さ, 種類)Canvas2Image.convertToPNG(canvasObj, 幅, 高さ)Canvas2Image.convertToJPEG(canvasObj, 幅, 高さ)Canvas2Image.convertToGIF(canvasObj, 幅, 高さ)Canvas2Image.convertToBMP(canvasObj,幅、身長）

vue では、$refs を使用して DOM を決定できます。

背景色: null、この文は転送された画像に白い境界線を持たないようにすることができます

メソッド: { toImage() { let _this = this; html2canvas(this.$refs.index,{backgroundColor: null }).then((canvas) =​​> { let _dataURL = Canvas.toDataURL(image/png); // _this.dataURL = _dataURL; Canvas2Image.saveAsPNG(canvas) });

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。