介绍一下纯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];
4、常用操作：
pdf.addPage() 在PDF文档中添加新页面，参数如下，也可以不设置，默认a4
pdf.addImage() 将图像添加到PDF,addImage参数设置如下：
删除某页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 = imgX var 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`); }交流
1、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/203187.html原文链接：https://javaforall.net
