Ранее я нашел в Интернете способ загрузки с использованием атрибута загрузки <a>. Это действительно очень просто и удобно, но этот метод не поддерживает IE, поэтому у меня не было другого выбора, кроме как найти другой метод.
Используйте html2canvas для преобразования страницы в изображение и используйте Canvas2image для загрузки.Версия, используемая в этом примере:
Установить
npm установить html2canvas Canvas2image --save
представлять
импортировать html2canvas из 'html2canvas';require('./canvas2image.js');Canvas2image.js необходимо изменить, чтобы его можно было привязать к окну.
(функция ($) { Canvas2Image = функция () { ... }}_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;
BackgroundColor: null, это предложение может сделать так, чтобы у передаваемого изображения не было белой рамки.
методы: { toImage() { let _this = this; _this.dataURL = _dataURL; Canvas2Image.saveAsPNG(холст) });Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.