根據屏幕大小不同，頁面內容自適應并一頁展示，應該如何實現
// 導出頁面為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)
}
}
}
)
