結合html2canvas和jsPDF實現html頁面轉pdf

By：授客QQ：103355122

實踐環境

win10

Vue 2.9.6

axios 0.18.0

html2canvas 1.0.0-rc.3

jspdf 1.5.3

安裝 html2canvas

進入vue項目所在目錄,然后執行以下安裝命令

cd /d E:\MyProjects\TMP\frontend

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

安裝jspdf

進入vue項目所在目錄,然后執行以下安裝命令

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// 獲得當前可視窗口的寬度(不包含滾動條)

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

if (win_out>win_in) {

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

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

}

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

canvas.height = eleH * 2

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

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

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

html2canvas(ele, {

dpi:300,

useCORS:true//允許canvas畫布內可以跨域請求外部鏈接圖片, 允許跨域請求。

}).then(canvas=> {

var contentWidth = canvas.width

var contentHeight = canvas.height

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

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

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

var leftHeight = contentHeight

//頁面偏移

var position = 0

//a4紙的尺寸[595.28,841.89],單位像素，html頁面生成的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")

//有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)

//當內容未超過pdf一頁顯示的范圍，無需分頁

if (leftHeight

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

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

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

} else {

// 分頁

while (leftHeight>0) {

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

leftHeight -= pageHeight

position -= 841.89

//避免添加空白頁

if (leftHeight>0) {

pdf.addPage()

}

}

}

pdf.save(pdfFileName + ".pdf")

})

}

}

}

修改main.js

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

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

Vue.use(htmlToPdf)

.vue組件中使用

對應代碼片段

...略

下載報告?

...略

...略

...略

exportdefault {

...略

methods: {

...略

// 下載報告

downloadSprintTestReport() {

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

...略

下載結果展示

存在問題

只能獲取瀏覽器可視區域的內容，類似截圖，默認情況下，依賴翻頁的些數據都無法直接獲取到

參考鏈接

總結

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

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