結(jié)合html2canvas和jsPDF實(shí)現(xiàn)html頁(yè)面轉(zhuǎn)pdf

By：授客QQ：103355122

實(shí)踐環(huán)境

win10

Vue 2.9.6

axios 0.18.0

html2canvas 1.0.0-rc.3

jspdf 1.5.3

安裝 html2canvas

進(jìn)入vue項(xiàng)目所在目錄,然后執(zhí)行以下安裝命令

cd /d E:\MyProjects\TMP\frontend

E:\MyProjects\TMP\frontend>npm install html2canvas

安裝jspdf

進(jìn)入vue項(xiàng)目所在目錄,然后執(zhí)行以下安裝命令

cd /d E:\MyProjects\TMP\frontend

E:\MyProjects\TMP\frontend>npm install jspdf

編寫htmlToPdf.js

htmlToPdf.js文件路徑,例中為src/common/utils/htmlToPdf.js

import html2canvas from "html2canvas"

import JsPD Ffrom "jspdf"

/**

* @param ele要生成 pdf 的DOM元素(容器)

* @param padfName???? PDF文件生成后的文件名字

* */

export default {

install(Vue, options) {

Vue.prototype.getPdfFromHtml = function(ele, pdfFileName) {

let eleW = ele.offsetWidth// 獲得該容器的寬

//?? let eleH = ele.offsetHeight // 獲得該容器的高

let eleH = ele.scrollHeight// 獲得該容器的高

let eleOffsetTop = ele.offsetTop// 獲得該容器到文檔頂部的距離

let eleOffsetLeft = ele.offsetLeft// 獲得該容器到文檔最左的距離

var canvas = document.createElement("canvas")

var abs = 0

let win_in = document.documentElement.clientWidth || ????????document.body.clientWidth// 獲得當(dāng)前可視窗口的寬度(不包含滾動(dòng)條)

let win_out = window.innerWidth// 獲得當(dāng)前窗口的寬度(包含滾動(dòng)條)

if (win_out>win_in) {

// abs = (win_o - win_i)/2;??? // 獲得滾動(dòng)條長(zhǎng)度的一半

abs = (win_out - win_in) / 2// 獲得滾動(dòng)條寬度的一半

}

canvas.width = eleW * 2// 將畫布寬&&高放大兩倍

canvas.height = eleH * 2

var context = canvas.getContext("2d")

context.scale(2, 2) // 增強(qiáng)圖片清晰度

context.translate(-eleOffsetLeft - abs, -eleOffsetTop)

html2canvas(ele, {

dpi:300,

useCORS:true//允許canvas畫布內(nèi)可以跨域請(qǐng)求外部鏈接圖片, 允許跨域請(qǐng)求。

}).then(canvas=> {

var contentWidth = canvas.width

var contentHeight = canvas.height

//一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;

var pageHeight = (contentWidth / 592.28) * 841.89 // 這樣寫的目的在于保持寬高比例一致 pageHeight/canvas.width = a4紙高度/a4紙寬度// 寬度和canvas.width保持一致

//未生成pdf的html頁(yè)面高度

var leftHeight = contentHeight

//頁(yè)面偏移

var position = 0

//a4紙的尺寸[595.28,841.89],單位像素，html頁(yè)面生成的canvas在pdf中圖片的寬高

var imgWidth = 595.28

var imgHeight = (595.28 / contentWidth) * contentHeight

var pageData = canvas.toDataURL("image/jpeg", 1.0)

var pdf = newJsPDF("", "pt", "a4")

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

//當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)

if (leftHeight

//在pdf.addImage(pageData, 'JPEG', 左，上，寬度，高度)設(shè)置在pdf中顯示；

pdf.addImage(pageData, "JPEG", 5, 0, imgWidth, imgHeight)

// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);

} else {

// 分頁(yè)

while (leftHeight>0) {

pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight)

leftHeight -= pageHeight

position -= 841.89

//避免添加空白頁(yè)

if (leftHeight>0) {

pdf.addPage()

}

}

}

pdf.save(pdfFileName + ".pdf")

})

}

}

}

修改main.js

如下，main.js中增加以下代碼

import htmlToPdf from "@/common/utils/htmlToPdf"

Vue.use(htmlToPdf)

.vue組件中使用

對(duì)應(yīng)代碼片段

...略

下載報(bào)告?

...略

...略

...略

exportdefault {

...略

methods: {

...略

// 下載報(bào)告

downloadSprintTestReport() {

this.getPdfFromHtml(this.$refs.sprintReport, this.reportInfo.title)

...略

下載結(jié)果展示

存在問(wèn)題

只能獲取瀏覽器可視區(qū)域的內(nèi)容，類似截圖，默認(rèn)情況下，依賴翻頁(yè)的些數(shù)據(jù)都無(wú)法直接獲取到

參考鏈接

總結(jié)

以上是生活随笔為你收集整理的asp.net html2canvas,Vue 结合html2canvas和jsPDF实现html页面转pdf的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。