前端将页面转化为图片---进行下载导出、打印等功能

1.需要实现一个将div页面的东西导出,使用到了html2canvas

官网：

配置型 | HTML2CANVAS 中文文档 (allenchinese.github.io)

2.下载html2canvas

npm install --save html2canvas

3.导入使用到的页面

import html2canvas from 'html2canvas'

4.创建图片基础应用

主要代码：

  creatImg() {
            const setup = {
                useCORS: true, // 使用跨域
            };
            html2canvas(this.$refs.pictureAll, setup).then((canvas) => {
                this.url = canvas.toDataURL("image/jpg");//生成的图片路径
                // this.exportPicture(link, "文件名");
            });
        },

其他属性：

data-html2canvas-ignore：添加这个属性，生成图片的时候回忽略此部分，在想忽略的标签直接添加这个属性即可，例如：

  

      gfdgdf