分辨率自动调节html,html2Canvas根据不同分辨率，生成pdf内容自适应

根据屏幕大小不同，页面内容自适应并一页展示，应该如何实现

// 导出页面为PDF格式

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default{

install (Vue, options) {

Vue.prototype.getPdf = function () {

setTimeout(() => {

var title = this.htmlTitle

let pdfDom_html = document.getElementsByClassName('pdfDom')

let PDF = new JsPDF('', 'pt', 'a4')

var imgArr = new Array();

let scale = 2 //获取像素密度的方法 (也可以采用自定义缩放比例)

for(var i = 0; i< pdfDom_html.length; i++) {

html2Canvas(pdfDom_html[i], {

useCORS: true,//允许加载跨域的图片

allowTaint: true,//允许跨域图片

scale: scale // 添加的scale 参数

}).then(function (canvas) {

let contentWidth = canvas.width

console.log(contentWidth, 'contentWidth')

let contentHeight = canvas.height

console.log(contentHeight, 'contentHeight')

//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

let imgWidth = 595.28

let imgHeight = (592.28 / contentWidth * contentHeight)

console.log(imgHeight, 'imgHeight')

//返回图片dataURL，参数：图片格式和清晰度(0-1)

// let pageData = canvas.toDataURL('image/png', 1.0)

var pageData = new Image();

pageData.src = canvas.toDataURL('image/jpeg', 1.0);

imgArr.push(pageData)

if (imgArr.length == pdfDom_html.length) {

for(var j = 0; j < imgArr.length; j++) {

PDF.addImage(imgArr[j].src, 'JPEG', 0, 0, imgWidth, imgHeight)

if (j < imgArr.length - 1) {

PDF.addPage()

}

}

PDF.save(title + '.pdf')

}

})

}

}, 100)

}

}

}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！