vue2将html元素转换成图片

需要用到html2canvas插件

安装插件

npm install html2canvas

在需要的页面引入插件

import html2canvas from "html2canvas";

在需要转换的元素上绑定ref的值，（这里这个元素内包括元素本身的所有样式，都会被转换） 

<el-button type="primary" @click="export"
      >导出图片</el-button
    >
    <div ref="exportCanvas">
      <p>123456789</p>
    </div>

export() {
      html2canvas(this.$refs.exportCanvas, {
        allowTaint: false, // 是否允许跨域图像污染画布
        useCORS: true, // 使用CO RS从服务器加载图像，必须为true否则img图片可能显示不出来
        // x: 裁剪画布x坐标,
        // y: 裁剪画布y坐标,
      }).then((canvas) => {
        // 点击保存操作
        const link = document.createElement("a");
        link.href = canvas.toDataURL();
        link.setAttribute("download", "导出图片名称" + ".png");
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
      });
    },

2022-12-28补充，将该方法封装为公共组件

//file-saver 文件处理  https://www.npmjs.com/package/file-saver

import { saveAs } from "file-saver";
import html2canvas from "html2canvas";
/**
 * 构造树型结构数据
 * @param {string} id 要下载的dom id 
 * @param {string} fileName 下载的图片名称
 */
export function downHtmlImg(domId, fileName) {
    let dom = document.getElementById(domId)
        //将html转换成画布，再用file-saver插件下载
    html2canvas(dom, {
        allowTaint: false, //默认为false，是否允许跨域图像污染画布
        useCORS: true, // 使用CO RS从服务器加载图像，必须为true否则img图片可能显示不出来
        // imageTimeout:0,  //加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。
        // x: 裁剪画布x坐标,
        // y: 裁剪画布y坐标,
        // scale: 2.1, //每个设备的window.devicePixelRatio的值不尽一样，想清晰就调高，想压缩大小就调低。但调的越高，图片的生成时间就越长。
    }).then(function(canvas) {
        // 改用file-saver插件下载文件，用使用document对象属性和方法保存的个别手机（小米）会下载失败且卡
        canvas.toBlob(function(blob) {
            saveAs(blob, fileName + ".png"); //格式默认png
        });
    });
}

//在组件中使用
//import { downHtmlImg } from "@/utils/downHtmlImg";
//   绑定点击事件，传入domID，要下载的文件名
//   downHtmlImg(domId, fileName) {
//      downHtmlImg(domId, fileName);
//   },



// 传统使用html2canvas下载图片，缺点：过慢且卡，一些手机会下载失败，因为是直接使用Document 对象属性和方法保存到本地
// let dom = document.getElementById(id)
// html2canvas(dom, {
//   allowTaint: false, //默认为false，是否允许跨域图像污染画布
//   useCORS: true, // 使用CO RS从服务器加载图像，必须为true否则img图片可能显示不出来
//   // imageTimeout:0,  //加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。
//   // x: 裁剪画布x坐标,
//   // y: 裁剪画布y坐标,
//   scale: 1.3,
// })
//   .then((canvas) => {
//     // 点击保存操作
//     const link = document.createElement("a");  //创建创建a元素节点。
//     link.href = canvas.toDataURL();   //让a元素链接   指向画布的返回一个包含图片展示的 数据URL。可以使用 type 参数其类型，默认为 PNG 格式。
//     link.setAttribute("download", "全天数据报表" +'.png');  创建或改变某个新属性。
//     link.style.display = "none";   //让a元素样式为空
//     document.body.appendChild(link);  //向节点的子节点列表的末尾添加新的子节点。
//     link.click();  //触发a元素
//   })