Vue3导出pdf方案
1.引入两个依赖
npm i html2canvas
npm i jspdf
2.在utils文件夹下新建htmlToPdf.js文件
// 页面导出为pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';const htmlToPdf = {getPdf(title, loading) {// loading = true;console.log(loading);html2Canvas(document.querySelector('#pdfDom'), {allowTaint: false,taintTest: false,logging: false,useCORS: true,dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍scale: 4, //按比例增加分辨率}).then((canvas) => {var pdf = new jsPDF('p', 'mm', 'a4'); //A4纸,纵向var ctx = canvas.getContext('2d'),a4w = 190,a4h = 272, //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度renderedHeight = 0;while (renderedHeight < canvas.height) {var page = document.createElement('canvas');page.width = canvas.width;page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页//用getImageData剪裁指定区域,并画到前面创建的canvas对象中page.getContext('2d').putImageData(ctx.getImageData(0,renderedHeight,canvas.width,Math.min(imgHeight, canvas.height - renderedHeight),),0,0,);pdf.addImage(page.toDataURL('image/jpeg', 1.0),'JPEG',10,10,a4w,Math.min(a4h, (a4w * page.height) / page.width),); //添加图像到页面,保留10mm边距renderedHeight += imgHeight;if (renderedHeight < canvas.height) {pdf.addPage(); //如果后面还有内容,添加一个空页}// delete page;}//保存文件pdf.save(title + '.pdf');// loading = false;console.log(loading);});},
};export default htmlToPdf;
扩展
:还可以传多个不同容器id
// 页面导出为pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';const htmlToPdf = {getPdf(title, id) {html2Canvas(document.querySelector(id), {allowTaint: false,taintTest: false,logging: false,useCORS: true,dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍scale: 4, //按比例增加分辨率}).then((canvas) => {var pdf = new jsPDF('p', 'mm', 'a4'); //A4纸,纵向var ctx = canvas.getContext('2d'),a4w = 190,a4h = 272, //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度renderedHeight = 0;while (renderedHeight < canvas.height) {var page = document.createElement('canvas');page.width = canvas.width;page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页//用getImageData剪裁指定区域,并画到前面创建的canvas对象中page.getContext('2d').putImageData(ctx.getImageData(0,renderedHeight,canvas.width,Math.min(imgHeight, canvas.height - renderedHeight),),0,0,);pdf.addImage(page.toDataURL('image/jpeg', 1.0),'JPEG',10,10,a4w,Math.min(a4h, (a4w * page.height) / page.width),); //添加图像到页面,保留10mm边距renderedHeight += imgHeight;if (renderedHeight < canvas.height) {pdf.addPage(); //如果后面还有内容,添加一个空页}// delete page;}});},
};export default htmlToPdf;
3.来到需要将vue转成pdf的页面
...
<!-- 按钮 -->
<el-button size="mini" type="primary" @click="pdfFunc" :loading="loading">转成pdf
</el-button>
...
<div id="pdfDom"><!-- 此处是希望转成pdf的部分的内容,用一个大div盒子包起来 -->
</div>
<script setup>
// 导入htmlToPdf.js
import htmlToPdf from '../utils/htmlToPdf';
// 可在methods定义
const pdfFunc = () => { loading.value = true;// 调用htmlToPdf工具函数htmlToPdf.getPdf('文档名称');// 定时器模拟按钮loading动画的时间setTimeout(() => {loading.value = false;ElMessage.success('打印成功!');}, 1000);
}
</script>
methods:
pdfFunc() {// 调用htmlToPdf工具函数htmlToPdf.getPdf('文档名称');// 定时器模拟按钮loading动画的时间setTimeout(() => {}, 1000);},
扩展
:多个容器不同id
// 容器id="pdfCompany"pdfFunc() {this.loadingFlag = true; // 动画加载事件// 调用htmlToPdf工具函数htmlToPdf.getPdf('中小企业认定',"#pdfCompany");// 定时器模拟按钮loading动画的时间setTimeout(() => {this.loadingFlag = false;}, 1000);}
jsPdf
介绍一下纯jspdf用法,将一个图片列表导出为pdf文件,根据图片宽高计算在pdf中的位置
jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。
官网地址:https://rawgit.com/MrRio/jsPDF/master/docs/
1、安装:npm install jspdf
2、引入:import jsPDF from “jspdf”
3、使用:
let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);
第一个参数: l:横向 p:纵向
第二个参数:测量单位(“pt”,“mm”, “cm”, “m”, “in” or “px”)
第三个参数:可以是下面格式,默认为“a4”
- a0 - a10
- b0 - b10
- c0 - c10
- dl
- letter
- government-letter
- legal
- junior-legal
- ledger
- tabloid
- credit-card
默认为“a4”。如果您想使用自己的格式,只需将大小作为数字数组传递,例如[595.28, 841.89];
*删除某页pdf:*
let targetPage = pdf.internal.getNumberOfPages(); //获取总页
pdf.deletePage(targetPage); // 删除目标页
*保存pdf文档:*
pdf.save(`测试.pdf`);
Example:
1、导出一整页pdf文件,根据图片高度动态设置pdf的位置,*根据自己的数据格式组装导出方法*
/*** 导出PDF一页 PDF中的页面宽度或高度不能超过14400个userUnit。jsPDF将宽度/高度限制为14400* @param pageList*/const exportPdf = (pageList: any) => {let [imgX, imgY] = [595.28, 841.89]; // a4纸尺寸[595.28, 841.89];var pdfX = imgXvar pdfY = getLength(pageList);let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); //l:横向 p:纵向let isAddpage = 0;for (let [index, item] of pageList.entries()) {for (let j = 0; j < item.imageList.length; j++) {const image = item.imageList[j];let imgHeight = imgX / (image.width / image.height);pdf.addImage(image.data, 'JPEG', 0, isAddpage, imgX, imgHeight);isAddpage += imgHeight;}}pdf.save(`全部教材_${getTime()}.pdf`);}
2、分页导出
const exportPdf = (pageList: any) => {let [imgX, imgY] = [595.28, 841.89];let pdf = new jsPDF('p', 'pt', 'a4');for (let [index, item] of pageList.entries()) {for (let j = 0; j < item.imageList.length; j++) {const image = item.imageList[j];let imgHeight = imgX / (image.width / image.height); //根据宽度计算高度pdf.addImage(image.data, 'JPEG', 0, 0, imgX, imgHeight);pdf.addPage();}}let targetPage = pdf.internal.getNumberOfPages();pdf.deletePage(targetPage); // 删除最后一页pdf.save(`测试.pdf`);}