vue 項目導出pdf兩種方式 :
https://gitee.com/lbx_1397372495/vue-pdf-demo
項目源碼地址
1.使用 html2Canvas + jsPDF 導出PDF, 這種方式什麼都好,就是下載的pdf太模糊了。對要求好的pdf這種方式真是不行啊!
2.調用瀏覽器自身的方法。window.print() 來打印(打印時可選下載),這種方式打印出來會清楚點,但純在瀏覽器兼容問題。 谷歌瀏覽器比較好用點
首先看下導出的樣式,是否是你需要的,如果是你想要的恭喜你找到答案了!!!!!!!
瀏覽器導出pdf方式
js組件導出pdf方式
1 、我們要添加兩個模塊
第一個.將頁面html轉換成圖片
npm install --save html2canvas
第二個.將圖片生成pdf
npm install jspdf --save
2、定義函數,創建兩個工具js文件(htmlToPdf.js、htmlToPdfJQ.js)
(1) 創建一個htmlToPdf.js文件在指定位置.我個人習慣放在(’\src\unit\htmlToPdf.js’)
/* eslint-disable */
//不使用JQuery版的
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
/**
* @param ele 要生成 pdf 的DOM元素(容器)
* @param padfName PDF文件生成後的文件名字
* */
function downloadPDF(ele, pdfName){
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; // 獲得當前可視窗口的寬度(不包含滾動條)
let win_out = window.innerWidth; // 獲得當前窗口的寬度(包含滾動條)
if(win_out>win_in){
// abs = (win_o - win_i)/2; // 獲得滾動條長度的一半
abs = (win_out - win_in)/2; // 獲得滾動條寬度的一半
// 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);
// 這裏默認橫向沒有滾動條的情況,因爲offset.left(),有無滾動條的時候存在差值,因此
// translate的時候,要把這個差值去掉
// html2canvas(element).then( (canvas)=>{ //報錯
// html2canvas(element[0]).then( (canvas)=>{
html2canvas( ele, {
dpi: 300,
// allowTaint: true, //允許 canvas 污染, allowTaint參數要去掉,否則是無法通過toDataURL導出canvas數據的
useCORS:true //允許canvas畫布內 可以跨域請求外部鏈接圖片, 允許跨域請求。
} ).then( (canvas)=>{
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一頁pdf顯示html頁面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成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 = new JsPDF('', 'pt', 'a4');
//有兩個高度需要區分,一個是html頁面的實際高度,和生成pdf的頁面高度(841.89)
//當內容未超過pdf一頁顯示的範圍,無需分頁
if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左,上,寬度,高度)設置在pdf中顯示;
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
} else { // 分頁
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白頁
if(leftHeight > 0) {
pdf.addPage();
}
}
}
//可動態生成
pdf.save(pdfName);
})
}
export default {
downloadPDF
}
(2) 創建一個htmlToPdfJQ.js文件在指定位置.我個人習慣放在(’\src\unit\htmlToPdfJQ.js’)
/* eslint-disable */
//使用JQuery方式寫的。
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
import $ from 'jquery';
// console.log($, '這是什麼什麼');
function download(ele){
var element = $("#demo"); // 這個dom元素是要導出pdf的div容器
console.log(element,'1212122');
// var element = ele; // 這個dom元素是要導出pdf的div容器
var w = element.width(); // 獲得該容器的寬
var h = element.height(); // 獲得該容器的高
var offsetTop = element.offset().top; // 獲得該容器到文檔頂部的距離
var offsetLeft = element.offset().left; // 獲得該容器到文檔最左的距離
console.log(offsetTop,'------',offsetLeft);
var canvas = document.createElement("canvas");
var abs = 0;
var win_i = $(window).width(); // 獲得當前可視窗口的寬度(不包含滾動條)
var win_o = window.innerWidth; // 獲得當前窗口的寬度(包含滾動條)
console.log(canvas, abs, win_i, win_o);
if(win_o>win_i){
abs = (win_o - win_i)/2; // 獲得滾動條長度的一半
}
canvas.width = w * 2; // 將畫布寬&&高放大兩倍
canvas.height = h * 2;
var context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-offsetLeft-abs,-offsetTop);
// 這裏默認橫向沒有滾動條的情況,因爲offset.left(),有無滾動條的時候存在差值,因此
// translate的時候,要把這個差值去掉
// html2canvas(element).then( (canvas)=>{ //報錯
html2canvas(element[0]).then( (canvas)=>{
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一頁pdf顯示html頁面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html頁面高度
var leftHeight = contentHeight;
//頁面偏移
var position = 0;
//a4紙的尺寸[595.28,841.89],html頁面生成的canvas在pdf中圖片的寬高
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new JsPDF('', 'pt', 'a4');
//有兩個高度需要區分,一個是html頁面的實際高度,和生成pdf的頁面高度(841.89)
//當內容未超過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 -= 841.89;
//避免添加空白頁
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('我的簡歷.pdf');
})
}
export default {
download
}
3 、在我們自己業務中使用導出組件功能
<template>
<div class="mod-config">
<div style="padding: 10px;">
<el-button type="primary" @click="handleDown">PDF下載-離職申請表</el-button>
<el-button type="primary" @click="handleWindowPrint( '#demo', '離職申請表' )">瀏覽器方式下載</el-button>
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-back" @click="goBack">返回
</el-button>
</div>
<div style="width: 100%">
<div id="demo">
<table border="1" class="table_style">
<thead>
<th colspan="5" style="font-size: 30px">離職申請表</th>
</thead>
<tbody>
<tr>
<td rowspan="3">申請人</td>
<td>工號</td>
<td>{{leaveData.userno}}</td>
<td>職位</td>
<td>{{leaveData.position}}</td>
</tr>
<tr>
<td>姓名</td>
<td>{{leaveData.realName}}</td>
<td>離職原因</td>
<td>{{leaveData.reason | typeFilter}}</td>
</tr>
<tr>
<td>部門</td>
<td>{{leaveData.dept}}</td>
<td>離崗日期</td>
<td>{{leaveData.leaveDate.substr(0,10)}}</td>
</tr>
<tr>
<td colspan="5" style="font-size: 20px">各級審批信息</td>
</tr>
<tr>
<td>審批人姓名</td>
<td colspan="3">審批意見</td>
<td>審批時間</td>
</tr>
<tr v-for="item in approvalLogs">
<td>{{item.approveName}}</td>
<td colspan="3">{{item.approveMsg}}</td>
<td>{{item.approveDate.substr(0,10)}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import htmlToPdf from '@/unit/htmlToPdf'
const libraryOption = [{id: 0, name: '家庭原因'}, {id: 1, name: '個人發展'}, {id: 2, name: '薪資福利'},
{id: 3, name: '工作環境'}, {id: 4, name: '工作時間'}, {id: 5, name: '身體健康'}]
const calendarTypeKeyValue = libraryOption.reduce((acc, cur) => {
acc[cur.id] = cur.name
return acc
}, {})
export default {
name: 'PdfDemo',
data () {
// 和導出pdf沒關係
return {
leaveData: {
dimId: ''
},
approvalLogs: []
}
},
filters: {
typeFilter (type) {
return calendarTypeKeyValue[type]
}
},
created () {
this.getList()
},
methods: {
getList () {
this.leaveData = this.$route.query.obj
if (!this.leaveData.dimId) {
this.$message.error('id不能爲空,請從下下載!')
this.goBack()
} else {
this.$http({
url: this.$http.adornUrl(`/sys/sysapprovelog/list`),
method: 'post',
data: {
approve_type: 6,
approve_id: this.leaveData.dimId
}
}).then(({data}) => {
console.log(data)
if (data && data.code === 0) {
this.approvalLogs = data.sysApproveLogs
console.log('------------2------------', this.approvalLogs)
}
})
}
console.log('------------1------------', this.leaveData)
},
handleWindowPrint (ele, fileName) {
// 留存原來的 html
// let bdHtml = window.document.body.innerHTML;
// let bdHtml = document.querySelector('#app').innerHTML;
// 要打印的 內容 html
// document.body.innerHTML = document.querySelector('#demo').innerHTML;
// document.body.innerHTML = document.querySelector('#demo').outerHTML;
// document.querySelector('#app').innerHTML = document.querySelector('#demo').outerHTML;
// document.querySelector('#main').innerHTML = document.querySelector('#demo').outerHTML;
console.log(666)
// 去除頁面不必要的 head 標籤內 內容, 避免影響打印頁 , title 爲保存爲 pdf 的文件時的 文件名
document.head.innerHTML = '<meta charset="utf-8">\n' +
' <title> ' + fileName + '</title>\n' +
' <meta name="format-detection" content="telephone=no">\n' +
' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
' <link rel="stylesheet" href="./static/css/contract.css"/>' // 生成pdf的外部css樣式
// document.body.innerHTML = document.querySelector('#demo').outerHTML;
// document.querySelector('#main').innerHTML = document.querySelector('#demo').outerHTML;
// document.body.innerHTML = document.querySelector('#demo').outerHTML;
document.body.innerHTML = document.querySelector(ele).outerHTML
// window.print();
// 轉異步 等待dom元素渲染(樣式)完畢在打印
setTimeout(() => {
// 打印
window.print()
// 刷新頁面
window.location.reload()
}, 20)
// 重新設會當前頁面
// window.document.body.innerHTML = bdHtml;
// document.querySelector('#app').innerHTML = bdHtml;
// 刷新頁面
// window.location.reload();
},
goBack () {
this.$router.go(-1)
},
handleDown () {
htmlToPdf.downloadPDF(document.querySelector('#demo'), '離職申請表')
}
}
}
</script>
<style scoped>
#demo {
background-color: #fff;
width: 1000px;
/* height: 400px; */
margin: auto;
padding: 40px;
box-sizing: border-box;
}
.table_style td,th {
padding: 10px;
font-size: 15px;
}
.table_style {
border-collapse: collapse;
width: 100%;
text-align: center
}
</style>
https://gitee.com/lbx_1397372495/vue-pdf-demo
項目源碼地址
希望給個star