根据屏幕大小不同,页面内容自适应并一页展示,应该如何实现
// 导出页面为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)
}
}
}
页面上有好几个pdfDom_html,你想截取到一张图里?
html2canvas里放的dom对象可以是pdfDom_html父级,父级包括了所有的pdf。这个截取出来的图是否就可以了呢