vue3+ElementUI html導(dǎo)出Pdf方式
更新時(shí)間：2026年03月10日 09:17:52 作者：風(fēng)隨心飛飛
文章介紹了如何使用html2canvas和jspdf兩個(gè)依賴生成PDF文件,并在Vue項(xiàng)目中應(yīng)用,通過(guò)將PDF轉(zhuǎn)換為base64Url,可以方便地進(jìn)行上傳和下載操作
1. 安裝依賴
主要用到以下兩個(gè)依賴：
html2canvas：通過(guò)獲取HTML的某個(gè)元素，然后生成Canvas，能讓用戶保存為圖片。jspdf：基于HTML5的客戶端解決方案，用于生成各種用途的 PDF 文檔。
npm i html2canvas jspdf --save
package.json
"dependencies": {
"html2canvas": "^1.4.1",
"jspdf": "^2.5.1",
"vue": "^3.2.37"
}
2. 創(chuàng)建htmlToPdf.js
/* eslint-disable */
//不使用JQuery版的
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
/**
* @param ele 要生成 pdf 的DOM元素（容器）
* @param padfName PDF文件生成后的文件名字
* */
function js_getDPI() {
var arrDPI = new Array();
if (window.screen.deviceXDPI != undefined) {
arrDPI[0] = window.screen.deviceXDPI;
arrDPI[1] = window.screen.deviceYDPI;
}
else {
var tmpNode = document.createElement("DIV");
tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
document.body.appendChild(tmpNode);
arrDPI[0] = parseInt(tmpNode.offsetWidth);
arrDPI[1] = parseInt(tmpNode.offsetHeight);
tmpNode.parentNode.removeChild(tmpNode);
}
return arrDPI;
}
export function getPdfUrl(ele, pdfName,callback){
let eleW = ele.offsetWidth;// 獲得該容器的寬
let eleH = ele.offsetHeight;// 獲得該容器的高
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);
context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
// 這里默認(rèn)橫向沒(méi)有滾動(dòng)條的情況，因?yàn)閛ffset.left(),有無(wú)滾動(dòng)條的時(shí)候存在差值，因此
// translate的時(shí)候，要把這個(gè)差值去掉
// html2canvas(element).then( (canvas)=>{ //報(bào)錯(cuò)
// html2canvas(element[0]).then( (canvas)=>{
html2canvas( ele, {
// dpi: 300,
width:eleW+135,
height:eleH,
// allowTaint: true, //允許 canvas 污染， allowTaint參數(shù)要去掉，否則是無(wú)法通過(guò)toDataURL導(dǎo)出canvas數(shù)據(jù)的
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;
//未生成pdf的html頁(yè)面高度
var leftHeight = contentHeight;
//頁(yè)面偏移
var position = 30;
//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 = new JsPDF('', 'pt', 'a4');
//有兩個(gè)高度需要區(qū)分，一個(gè)是html頁(yè)面的實(shí)際高度，和生成pdf的頁(yè)面高度(841.89)
//當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左，上，寬度，高度)設(shè)置在pdf中顯示；
pdf.addImage(pageData, 'JPEG', 30, 30, imgWidth, imgHeight);
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
} else { // 分頁(yè)
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白頁(yè)
if(leftHeight > 0) {
pdf.addPage();
}
}
}
//可動(dòng)態(tài)生成
// pdf.save(pdfName);
var buffer = pdf.output("datauristring");
callback(buffer)
})
}
export function downloadPDF2(ele, pdfName,callback){
let eleW = ele.offsetWidth;// 獲得該容器的寬
let eleH = ele.offsetHeight;// 獲得該容器的高
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)條寬度的一半
// console.log(a, '新abs');
}
canvas.width = eleW * 2; // 將畫布寬&&高放大兩倍
canvas.height = eleH * 2;
var context = canvas.getContext("2d");
// context.scale(2, 2);
context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
// 這里默認(rèn)橫向沒(méi)有滾動(dòng)條的情況，因?yàn)閛ffset.left(),有無(wú)滾動(dòng)條的時(shí)候存在差值，因此
// translate的時(shí)候，要把這個(gè)差值去掉
// html2canvas(element).then( (canvas)=>{ //報(bào)錯(cuò)
// html2canvas(element[0]).then( (canvas)=>{
html2canvas( ele, {
// dpi: 300,
width:eleW+135,
height:eleH,
// allowTaint: true, //允許 canvas 污染， allowTaint參數(shù)要去掉，否則是無(wú)法通過(guò)toDataURL導(dǎo)出canvas數(shù)據(jù)的
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;
//未生成pdf的html頁(yè)面高度
var leftHeight = contentHeight;
//頁(yè)面偏移
var position = 30;
//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 = new JsPDF('', 'pt', 'a4');
//有兩個(gè)高度需要區(qū)分，一個(gè)是html頁(yè)面的實(shí)際高度，和生成pdf的頁(yè)面高度(841.89)
//當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左，上，寬度，高度)設(shè)置在pdf中顯示；
pdf.addImage(pageData, 'JPEG', 30, 30, imgWidth, imgHeight);
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
} else { // 分頁(yè)
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白頁(yè)
if(leftHeight > 0) {
pdf.addPage();
}
}
}
//可動(dòng)態(tài)生成
pdf.save(pdfName + '.pdf');
callback()
})
}
3. 如何使用htmlToPdf.js
App.vue為例，這樣就得到了pdf-con范圍內(nèi)的PDF的base64Url, 可以轉(zhuǎn)成file對(duì)象去做上傳，提交給后端參數(shù)
調(diào)用此方法后瀏覽器就會(huì)直接下載PDF
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
elementUI+Springboot實(shí)現(xiàn)導(dǎo)出excel功能的全過(guò)程
這篇文章主要介紹了elementUI+Springboot實(shí)現(xiàn)導(dǎo)出excel功能,現(xiàn)在也對(duì)這個(gè)導(dǎo)出功能進(jìn)行一個(gè)匯總整理寫出來(lái)，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
下面小編就為大家分享一篇基于vue1和vue2獲取dom元素的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue3 canvas選擇器Canvas增加頁(yè)面性能方式
本文介紹了使用Vue3CompositionAPI和Canvas實(shí)現(xiàn)的交互式選擇器組件,支持PC端和移動(dòng)端的拖動(dòng)選擇、多選和取消選擇功能2026-05-05
vue3中的數(shù)據(jù)劫持的最新實(shí)現(xiàn)方案的proxy示例詳解
Vue3中使用Proxy實(shí)現(xiàn)數(shù)據(jù)劫持,解決了Vue2中數(shù)組和對(duì)象劫持的遺留問(wèn)題,Proxy可以修改某些操作的默認(rèn)行為,通過(guò)get和set方法實(shí)現(xiàn)數(shù)據(jù)的劫持和保護(hù)機(jī)制,感興趣的朋友跟隨小編一起看看吧2024-11-11
Vue2和Vue3的nextTick實(shí)現(xiàn)原理
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細(xì)介紹了Vue2和Vue3的nextTick實(shí)現(xiàn)原理，感興趣的同學(xué)可以參考一下2023-04-04
Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
下面小編就為大家分享一篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue實(shí)現(xiàn)父子組件傳值其實(shí)不難
這篇文章主要介紹了Vue實(shí)現(xiàn)父子組件傳值其實(shí)不難問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vite.config.js本地配置獲取真實(shí)請(qǐng)求地址詳解
vite.config.ts是Vite項(xiàng)目的配置文件,用于配置的構(gòu)建、開(kāi)發(fā)和部署等參數(shù),這篇文章主要介紹了vite.config.js本地配置獲取真實(shí)請(qǐng)求地址的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-08-08
vue 監(jiān)聽(tīng)屏幕高度的實(shí)例
今天小編就為大家分享一篇vue 監(jiān)聽(tīng)屏幕高度的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方式(重載當(dāng)前頁(yè)面數(shù)據(jù))
這篇文章主要介紹了vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方式(重載當(dāng)前頁(yè)面數(shù)據(jù)),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01