結合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項目所在目錄,然後執 ...
結合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<pageHeight) {
//在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組件中使用
對應代碼片段
<template>
...略
<el-button size="mini" type="primary" @click="downloadSprintTestReport">下載報告 </el-button>
...略
<!-- 迭代測試報告 -->
<div class="sprint-test-report-content" v-if = "showReport" ref="sprintReport">
<!-- 標題 -->
...略
</template>
<script>
...略
exportdefault {
...略
methods: {
...略
// 下載報告
downloadSprintTestReport() {
this.getPdfFromHtml(this.$refs.sprintReport, this.reportInfo.title)
...略
</script>
下載結果展示
存在問題
只能獲取瀏覽器可視區域的內容，類似截圖，預設情況下，依賴翻頁的些數據都無法直接獲取到
參考鏈接
http://html2canvas.hertzen.com/getting-started
https://github.com/MrRio/jsPDF
http://html2canvas.hertzen.com/configuration/
https://www.w3school.com.cn/tags/canvas_translate.asp
https://www.w3school.com.cn/tags/canvas_scale.asp
