jspdf+html2canvas浏览器缩放问题

之前在弄页面导出为pdf的时候,jspdf配合html2canvas貌似很好用,我自己在使用的时候也没有觉得有什么问题,但是客户那边反馈说下载下来的pdf不全. 后来问了客户才发现客户的浏览器比例缩放到了125%;这就导致了pdf不全, 先看看原来的代码:

download() {
      let jsPDF = jspdf.jsPDF;
      let container = document.getElementById('reportContent');
      let boundingClientRect = container.getBoundingClientRect();
      let width = boundingClientRect.width;
      let height = boundingClientRect.height;
      let canvas = document.createElement('canvas');
      let scale = 2; //这里放大了2倍是为了让导出的pdf更加清晰.
      canvas.width = width * scale;
      canvas.height = height * scale;
      let context = canvas.getContext('2d');
      context.scale(scale , scale); //这里需要放大
      html2canvas(container, {
        allowTaint: true,
        taintTest: true,
        canvas,
      }).then(canvas => {
        let binary = canvas.toDataURL("image/jpeg", 1)
        canvas.toBlob((blobObj) => {
          let contentWidth = canvas.width;
          let contentHeight = canvas.height;
          let pdf = new jsPDF('l', 'pt', [contentWidth, contentHeight]);
          pdf.addImage(binary, "JPEG", 0, 0, contentWidth, contentHeight)
          pdf.save('xxx.pdf');
        });
      })

    },

以上代码在100%缩放的情况下没有任何问题,导出的pdf也很清晰,但是一旦到了125%或者其他的缩放比例,那么导出的pdf就会缺失掉一部分.那么需要这么修改呢? 直接上代码:

 download() {
      let jsPDF = jspdf.jsPDF;
      let container = document.getElementById('reportContent');
      let boundingClientRect = container.getBoundingClientRect();
      let width = boundingClientRect.width;
      let height = boundingClientRect.height;
      let canvas = document.createElement('canvas');
      let devicePixelRatio = window.devicePixelRatio || 1;
      let scale = 2 * devicePixelRatio;//这里放大了2倍是为了让导出的pdf更加清晰.
      canvas.width = width * scale;
      canvas.height = height * scale;
      let context = canvas.getContext('2d');
      context.scale(scale / devicePixelRatio, scale / devicePixelRatio); //这里需要放大, 同时缩小绘制, 否则会出现pdf不全的情况.
      html2canvas(container, {
        allowTaint: true,
        taintTest: true,
        canvas,
      }).then(canvas => {
        let binary = canvas.toDataURL("image/jpeg", 1)
        canvas.toBlob((blobObj) => {
          let contentWidth = canvas.width;
          let contentHeight = canvas.height;
          let pdf = new jsPDF('l', 'pt', [contentWidth, contentHeight]);
          console.log(canvas.width, canvas.height);
          pdf.addImage(binary, "JPEG", 0, 0, contentWidth, contentHeight)
          pdf.save(vthis.reportTitle + '.pdf');
        });
      })
    },

需要改的也不多, 只是需要判断下设备的devicePixelRatio; 这样就不会出现pdf不全的问题了;

tips:这里有个小坑, 就是html2canvas的版本需要在1.4以上;不然的话导出的pdf会出现黑边, 之前用的是1.2版本,就出现了黑边,怎么调都不对,最后换了个版本就行了.....我用的版本是1.4.1.
还有个问题是pdf里面如果有echarts的话可能会不是很清晰,这里在创建echarts的时候可以加个配置就可以了.

let myChart = echarts.init(document.getElementById('deviceOnlineCharts'), null, {devicePixelRatio: 2});