vue如何将html内容转为图片并下载到本地

这篇文章主要介绍了vue如何将html内容转为图片并下载到本地，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

将html内容转为图片并下载到本地

需求：将自己写的html内容转化为图片并可以下载到本地

1.安装html2canvas

npm install --save html2canvas

2.在自己所需要的页面进行引入

import html2canvas from "html2canvas";

3.html

              内容内容内容     
                             下载

4.JS

//下载图片 let downimg= ()=>{   setTimeout(()=>{     proxy.$nextTick(()=>{       html2canvas(document.querySelector('#img'),{         useCORS: true       }).then(canvas => {         var url = canvas.toDataURL()     //把canvas转成base64         // 写一个隐藏的按标签，借助按标签的download属性下载图片         document.querySelector('#downimg').href = url         document.querySelector('#downimg').download = "我的持仓报告.png-600"         document.querySelector('#downimg').click()       })     })   },2000) }

以上代码就能实现将html内容转为图片并下载到本地。

vue将html页面转为图片并且下载该图片

1.下载 html2canvas

npm install html2canvas

2.对应页面引入该插件

import html2canvas from 'html2canvas';

3.具体用法（要element使用带有一些（可选）选项的 html2canvas 呈现，只需调用html2canvas(element, options);）

html2canvas(document.body).then(function(canvas) {     document.body.appendChild(canvas); });

4.转为图片并且下载

在methods方法中：

toImage() {     html2canvas(this.$refs.imageDom, {         backgroundColor: '#ffffff'     }).then(canvas => {         var imgData = canvas.toDataURL("image/jpeg");         this.fileDownload(imgData);     }) }, fileDownload(downloadUrl) {     let aLink = document.createElement("a");     aLink.style.display = "none";     aLink.href = downloadUrl;     aLink.download = "监控详情.png-600";     // 触发点击-然后移除     document.body.appendChild(aLink);     aLink.click();     document.body.removeChild(aLink); },

效果图：