場景

若依前后端分離版手把手教你本地搭建環境并運行項目：

若依前后端分離版手把手教你本地搭建環境并運行項目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分離文檔

在上面搭建起來框架的基礎上，怎樣實現前端將html頁面的內容導出為pdf。

html2canvas官網

html2canvas - Screenshots with JavaScript

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、安裝插件

// 將頁面 html 轉換成圖片 npm install html2canvas --save? // 將圖片生成 pdf npm install jspdf --save

2、頁面上添加要導出的html元素

? <div class="wrap" ><div id="pdfDom" style="padding: 10px;"><el-table:data="tableData"border><el-table-column prop="date" label="日期" width="250"></el-table-column><el-table-column prop="name" label="姓名" width="250"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table><el-image :src="logo"></el-image></div><button type="button" style="margin-top: 20px;" @click="btnClick">導出PDF</button></div>

其中id為pdfDom的div里面是要導出為pdf的內容

el-image是一張要顯示的圖片

3、導出按鈕的點擊事件

??? btnClick(){// 當下載pdf時，若不在頁面頂部會造成PDF樣式不對,所以先回到頁面頂部再下載let top = document.getElementById('pdfDom');if (top != null) {top.scrollIntoView();top = null;}let title = this.exportPDFtitle;html2Canvas(document.querySelector('#pdfDom'), {allowTaint: true}).then(function (canvas) {// 獲取canvas畫布的寬高let contentWidth = canvas.width;let contentHeight = canvas.height;// 一頁pdf顯示html頁面生成的canvas高度;let pageHeight = contentWidth / 841.89 * 592.28;// 未生成pdf的html頁面高度let leftHeight = contentHeight;// 頁面偏移let position = 0;// html頁面生成的canvas在pdf中圖片的寬高（本例為：橫向a4紙[841.89,592.28]，縱向需調換尺寸）let imgWidth = 841.89;let imgHeight = 841.89 / contentWidth * contentHeight;let pageData = canvas.toDataURL('image/jpeg', 1.0);let PDF = new JsPDF('l', 'pt', 'a4');// 兩個高度需要區分: 一個是html頁面的實際高度，和生成pdf的頁面高度// 當內容未超過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 -= 592.28;// 避免添加空白頁if (leftHeight > 0) {PDF.addPage();}}}PDF.save(title + '.pdf')})},

4、完整示例代碼

<template><div class="wrap" ><div id="pdfDom" style="padding: 10px;"><el-table:data="tableData"border><el-table-column prop="date" label="日期" width="250"></el-table-column><el-table-column prop="name" label="姓名" width="250"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table><el-image :src="logo"></el-image></div><button type="button" style="margin-top: 20px;" @click="btnClick">導出PDF</button></div> </template><script> // 導出頁面為PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' import logoImg from '@/assets/logo/logo.png' export default {name: "ExportPDF",data() {return {logo: logoImg,exportPDFtitle: "頁面導出PDF文件名",tableData: [{date: '2016-05-06',name: '王小虎',address: '重慶市九龍坡區火炬大道'}, {date: '2016-05-07',name: '王小虎',address: '重慶市九龍坡區火炬大道'},{date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'},]};},mounted() {},methods: {btnClick(){// 當下載pdf時，若不在頁面頂部會造成PDF樣式不對,所以先回到頁面頂部再下載let top = document.getElementById('pdfDom');if (top != null) {top.scrollIntoView();top = null;}let title = this.exportPDFtitle;html2Canvas(document.querySelector('#pdfDom'), {allowTaint: true}).then(function (canvas) {// 獲取canvas畫布的寬高let contentWidth = canvas.width;let contentHeight = canvas.height;// 一頁pdf顯示html頁面生成的canvas高度;let pageHeight = contentWidth / 841.89 * 592.28;// 未生成pdf的html頁面高度let leftHeight = contentHeight;// 頁面偏移let position = 0;// html頁面生成的canvas在pdf中圖片的寬高（本例為：橫向a4紙[841.89,592.28]，縱向需調換尺寸）let imgWidth = 841.89;let imgHeight = 841.89 / contentWidth * contentHeight;let pageData = canvas.toDataURL('image/jpeg', 1.0);let PDF = new JsPDF('l', 'pt', 'a4');// 兩個高度需要區分: 一個是html頁面的實際高度，和生成pdf的頁面高度// 當內容未超過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 -= 592.28;// 避免添加空白頁if (leftHeight > 0) {PDF.addPage();}}}PDF.save(title + '.pdf')})},}, }; </script><style scoped></style>

總結

以上是生活随笔為你收集整理的Vue中使用html2canvas和jspdf插件实现导出pdf(自定义html样式可带图片)并下载的全部內容，希望文章能夠幫你解決所遇到的問題。

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