html轉(zhuǎn)pdf

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default {

? install(Vue, options) {

? ? /**

? ? ?*

? ? ?* @param {*} reportName 下載時候的標(biāo)題

? ? ?* @param {*} isDownload ?是否下載默認(rèn)為下載,傳false不下載

? ? ?*/

? ? Vue.prototype.getPdf = function (reportName, isDownload = true) {

? ? ? // ? ? var target = document.getElementsByClassName("right-aside")[0];

? ? ? // target.style.background = "#FFFFFF";

? ? ? return new Promise((resolve, reject) => {

? ? ? ? var title = reportName;

? ? ? ? html2Canvas(document.querySelector('#pdfDom'), {

? ? ? ? ? allowTaint: true

? ? ? ? }).then((canvas) => {

? ? ? ? ? let contentWidth = canvas.width

? ? ? ? ? let contentHeight = canvas.height

? ? ? ? ? //一頁pdf顯示html頁面生成的canvas高度;

? ? ? ? ? let pageHeight = contentWidth / 592.28 * 841.89

? ? ? ? ? //未生成pdf的html頁面高度

? ? ? ? ? let leftHeight = contentHeight

? ? ? ? ? //頁面偏移

? ? ? ? ? let position = 0

? ? ? ? ? //a4紙的尺寸[595.28,841.89],html頁面生成的canvas在pdf中圖片的寬高

? ? ? ? ? let imgWidth = 595.28

? ? ? ? ? let imgHeight = 592.28 / contentWidth * contentHeight

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

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

? ? ? ? ? //有兩個高度需要區(qū)分,一個是html頁面的實(shí)際高度,和生成pdf的頁面高度(841.89)

? ? ? ? ? //當(dāng)內(nèi)容未超過pdf一頁顯示的范圍,無需分頁

? ? ? ? ? if (leftHeight < pageHeight) {

? ? ? ? ? ? PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)

? ? ? ? ? } else {

? ? ? ? ? ? while (leftHeight > 0) {

? ? ? ? ? ? ? PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)

? ? ? ? ? ? ? leftHeight -= pageHeight

? ? ? ? ? ? ? position -= 841.89

? ? ? ? ? ? ? //避免添加空白頁

? ? ? ? ? ? ? if (leftHeight > 0) {

? ? ? ? ? ? ? ? PDF.addPage()

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? }

? ? ? ? ? if (isDownload) {

? ? ? ? ? ? PDF.save(title + '.pdf')

? ? ? ? ? }

? ? ? ? ? // 刪除本地存儲的base64字段

? ? ? ? ? var pdfData = PDF.output('datauristring')//獲取base64Pdf

? ? ? ? ? resolve(pdfData)

? ? ? ? }

? ? ? ? )

? ? ? })

? ? }

? }

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容