根據屏幕大小不同，頁面內容自適應并一頁展示，應該如何實現

// 導出頁面為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)

}

}

}

總結

以上是生活随笔為你收集整理的html页面根据分辨率缩放,html2Canvas根据不同分辨率，生成pdf内容自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。