/**
path: src/utils/htmlToPdf.js
name: 导出页面为PDF格式
**/
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'const htmlToPdf ={getPdf(title){html2Canvas(document.querySelector('#pdfDom'),{
allowTaint:true,}).then(canvas=>{//内容的宽度
let contentWidth = canvas.width;//内容高度
let contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
let pageHeight = contentWidth /592.28*841.89;//未生成pdf的html页面高度
let leftHeight = contentHeight;//页面偏移
let position =0;//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
let imgWidth =595.28;
let imgHeight =592.28/ contentWidth * contentHeight;//canvas转图片数据
let pageData = canvas.toDataURL('image/jpeg',1.0);//新建JsPDF对象
let PDF =newJsPDF('','pt','a4');//判断是否分页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(title +'.pdf')})}};exportdefault htmlToPdf;
4.使用函数,文件位置src/views/PdfPage1.vue
<template><div id="PdfPage1"><button type="button"class="btn btn-primary" @click="pdfBtn">导出PDF</button><div id="pdfDom" style="padding:10px;background-color:#fff;"><img alt="Vue logo" src="@/assets/logo.png"><h1>Welcome to Your Vue.js App</h1><p v-for="(item,index) in 5":key="index">{{item}}Welcome to Your Vue.js App</p></div></div></template><script>
import htmlToPdf from '@/utils/htmlToPdf'exportdefault{
name:"PdfPage",data(){return{
htmlTitle:'页面导出PDF文件名',}},
methods:{pdfBtn(){
htmlToPdf.getPdf(this.htmlTitle);}}}</script><style scoped></style>
第一种:使用html2Canvas和JsPDF库,转化为图片后保存PDF。
1.代码位置:src/views/PdfPage2.vue
<template><div id="PdfPage2"><div class="no-print"><button type="button"class="btn btn-primary" @click="pdfBtn">导出PDF</button></div><div id="pdfDom" style="padding:10px;background-color:#fff;"><img alt="Vue logo" src="@/assets/logo.png"><h1>Welcome to Your Vue.js App</h1><p v-for="(item,index) in 5":key="index">{{item}}Welcome to Your Vue.js App</p></div></div></template><script>exportdefault{
name:"PdfPage2",
methods:{pdfBtn(){
window.print();}}}</script><style scoped>/*保存时的样式*//*
了解更多可 百度CSS print样式
*/
@media print{.no-print{
display: none;}}/*打印页配置*/
@page{
margin:60px 10px;}</style>