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});