标签：jspdf pageList image 用法 item imgX let pdf
介绍一下纯jspdf用法，将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置
jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档。
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`);
标签：jspdf,pageList,image,用法,item,imgX,let,pdf 来源： https://www.cnblogs.com/ranyonsue/p/14276303.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。