VUE中将页面导出为图片或者PDF

导出为图片

1. 将页面html转换成图片

npm install html2canvas --save

2. 在需要导出的页面引入

import html2canvas from 'html2canvas';

3. 在 methods 中添加方法

        dataURLToBlob(dataurl) {//ie 图片转格式
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                  bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                  u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], {type: mime})
              },
       	downloadResult(name) {
                let canvasID = document.body
                let a = document.createElement('a');
                html2canvas(canvasID).then(canvas => {
                  let dom = document.body.appendChild(canvas);
                  dom.style.display = "none";
                  a.style.display = "none";
                  document.body.removeChild(dom);
                  let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
                  a.setAttribute("href", URL.createObjectURL(blob));
                  a.setAttribute("download", name + ".png")
                  document.body.appendChild(a);
                  a.click();
                  URL.revokeObjectURL(blob);
                  document.body.removeChild(a);
                });
              },
         printOut(name) {
         	// 个人观察只是截取可见范围以及以下的区域，所以先将滚动条置顶
              $(window).scrollTop(0);  // jQuery 的方法
              document.body.scrollTop = 0; // IE的
              document.documentElement.scrollTop = 0; // 其他
              this.downloadResult(name)
     	 },

导出为PDF

1. 将页面html转换成图片

npm install html2canvas --save

2. 将图片生成pdf

npm install jspdf --save

3. 在需要导出的页面引入

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf'

4. 在 methods 中添加方法

printOut(name) {
        let shareContent = document.body,//需要截图的包裹的（原生的）DOM 对象
          width = shareContent.clientWidth, //获取dom 宽度
          height = shareContent.clientHeight, //获取dom 高度
          canvas = document.createElement("canvas"), //创建一个canvas节点
          scale = 2; //定义任意放大倍数 支持小数
        canvas.width = width * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale; //定义canvas高度 *缩放
        canvas.style.width = shareContent.clientWidth * scale + "px";
        canvas.style.height = shareContent.clientHeight * scale + "px";
        canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
        let opts = {
          scale: scale, // 添加的scale 参数
          canvas: canvas, //自定义 canvas
          logging: false, //日志开关，便于查看html2canvas的内部执行流程
          width: width, //dom 原始宽度
          height: height,
          useCORS: true, // 【重要】开启跨域配置
        };

        html2Canvas(shareContent, opts).then(() => {
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;
          //一页pdf显示html页面生成的canvas高度;
          var pageHeight = (contentWidth / 592.28) * 841.89;
          //未生成pdf的html页面高度
          var leftHeight = contentHeight;
          //页面偏移
          var position = 0;
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          var imgWidth = 595.28;
          var imgHeight = (592.28 / contentWidth) * contentHeight;
          var pageData = canvas.toDataURL("image/jpeg", 1.0);
          var PDF = new JsPDF("", "pt", "a4");
          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
              leftHeight -= pageHeight;
              position -= 841.89;
              if (leftHeight > 0) {
                PDF.addPage();
              }
            }
          }
          PDF.save(name + ".pdf"); // 这里是导出的文件名
        });
      },