长春公司网站模板建站,网站建站网站设计,北京高端网站开发公司,wordpress mx这是渲染的数据 这是生成的pdf文件#xff0c;直接可以打印 需要安装和npm依赖和引入封装的pdf.js文件
npm install --save html2canvas // 页面转图片
npm install jspdf --save // 图片转pdfpdf.js文件
import html2canvas from html2canvas;
import jsPDF …这是渲染的数据 这是生成的pdf文件直接可以打印 需要安装和npm依赖和引入封装的pdf.js文件
npm install --save html2canvas // 页面转图片
npm install jspdf --save // 图片转pdfpdf.js文件
import html2canvas from html2canvas;
import jsPDF from jspdf;
// 为传的pdf名称动态fileName
export const downloadPDF (page, fileName) {html2canvas(page).then(function (canvas) {canvas2PDF(canvas, fileName);});
};
const canvas2PDF (canvas, fileName) {let contentWidth canvas.width;let contentHeight canvas.height;//a4纸的尺寸[595.28,841.89]html页面生成的canvas在pdf中图片的宽高let imgWidth 595.28;let imgHeight 595.28 / contentWidth * contentHeight;// 第一个参数 l横向 p纵向// 第二个参数测量单位ptmm, cm, m, in or pxlet pdf new jsPDF(p, pt);pdf.addImage(canvas.toDataURL(image/jpeg, 1.0),JPEG,0,0,imgWidth,imgHeight);pdf.save(fileName .pdf);
};具体实现
Tempalte
template div div v-for(item, index) in listDatas :keyindexdiv classbossdiv classbox :refpdf-${index}div classbox_sondiv classtitlesXXX竞赛/divdiv classzhunasd准考证/divdiv classoncediv classcontentsdiv姓名: nbsp;{{ item.name }}/divdiv考号: nbsp;{{ item.kaohao }}/divdiv司职: nbsp;{{ item.gongzhongTitle }}/div/divdiv classphotosimg :srcitem.sfzhimgs alt width100% height150px //div/divtableborder1px solid #2D2822cellpadding0cellspacing0classtablestrtd stylewidth: 250px; border: 1px solid #2d2822nbsp;考试类别/tdtd stylewidth: 180px; border: 1px solid #2d2822nbsp;序号/td/trtrtd stylewidth: 250px; border: 1px solid #2d2822nbsp;理论测试/tdtd stylewidth: 180px; border: 1px solid #2d2822nbsp;{{ item.liLunZw }}/td/trtrtdstylewidth: 250px; border: 1px solid #2d2822v-ifitem.fangzhen[1] ! undefinednbsp;{{ item.fangzhen[0] }}/tdtdstylewidth: 180px; border: 1px solid #2d2822v-ifitem.uuid[1] ! undefinednbsp;{{ item.uuid[0] }}/td/trtrtdstylewidth: 250px; border: 1px solid #2d2822v-ifitem.fangzhen[1] ! undefinednbsp;{{ item.fangzhen[1] }}/tdtdstylewidth: 180px; border: 1px solid #2d2822v-ifitem.uuid[1] ! undefinednbsp;{{ item.uuid[1] }}/td/trtrtdstylewidth: 250px; border: 1px solid #2d2822v-ifitem.fangzhen[2] ! undefinednbsp;{{ item.fangzhen[2] }}/tdtdstylewidth: 180px; border: 1px solid #2d2822v-ifitem.uuid[2] ! undefinednbsp;{{ item.uuid[2] }}/td/trtrtdstylewidth: 250px; border: 1px solid #2d2822v-ifitem.fangzhen[3] ! undefinednbsp;{{ item.fangzhen[3] }}/tdtdstylewidth: 180px; border: 1px solid #2d2822v-ifitem.uuid[3] ! undefinednbsp;{{ item.uuid[3] }}/td/tr/tablediv classfootersdiv注意事项:/divdiv classfooters_one1、考生凭准考证和身份证进入考场,对号入座,并将准考证、br /div classfooters_two身份证放在桌面上/div/divdiv classfooters_two2、准考证如有涂改或者损坏严重情况,将视为无效证件。/div/div/div/div/div/divbutton clickhandleExport导出PDF/button/div
/templateScript
1.转换为base64的图片才能生效 http和https的图片生成都不生效
2.这里用到的是Google Chrome浏览器多文件下载一次最多只有10个这里我们有做异步处理延迟1秒下载
scriptimport { downloadPDF } from ../utils/pdf; //创建一个utils文件夹 下放封装的pdf
export default {data() {return {listDatas: [{kaohao: 2100,liLunZw: D106,sfzh: 2110,name: Stephen Curry,uuid: [GS01, GA02, GF03],gongzhongTitle: 后卫,fangzhen: [运球训练, 投篮训练, 上篮训练],sfzhimgs: 转换为base64的图片才能生效 http和https的图片生成都不生效,},{kaohao: 2100,liLunZw: D107,sfzh: 2110,name: Andrew Wiggins,uuid: [GS01, GA02, GF03],gongzhongTitle: 小前锋,fangzhen: [运球训练, 投篮训练, 上篮训练],sfzhimgs: ,},{kaohao: 2100,liLunZw: D107,sfzh: 2110,name: Andrew Wiggins,uuid: [GS01, GA02, GF03],gongzhongTitle: 小前锋,fangzhen: [运球训练, 投篮训练, 上篮训练],sfzhimgs: ,},{kaohao: 2100,liLunZw: D107,sfzh: 2110,name: Andrew Wiggins,uuid: [GS01, GA02, GF03],gongzhongTitle: 小前锋,fangzhen: [运球训练, 投篮训练, 上篮训练],sfzhimgs: ,},],};},methods: {// 导出pdfhandleExport() {this.downloadPDFs();},// 异步执行下载pdfasync downloadPDFs() {const downloadPromises [];for (let index 0; index this.listDatas.length; index) {const item this.listDatas[index].name; //获取名称const pdfElement this.$refs[pdf-${index}][0]; //获取pdf内容循环var content pdfElement.textContent; //获取文本内容const startIndex content.indexOf(考号:) 4; //截取考号为pdf的名称const endIndex content.indexOf(工种:);const examNumber content.substring(startIndex, endIndex).trim(); //pdf的名字const ZhongName item , examNumber; //名称考号为pdf名称await this.delay(1000); // 延迟1秒const downloadPromise downloadPDF(pdfElement, ZhongName); //获取打印pdf的内容downloadPromises.push(downloadPromise);}Promise.all(downloadPromises).then(() {// 全部下载完成后执行的代码console.log(全部下载完成);}).catch((error) {// 处理下载错误console.error(下载出错, error);});},delay(ms) {return new Promise((resolve) setTimeout(resolve, ms));},},
};
/scriptStyle
style
.boss {width: 100%;margin: 0 auto;display: flex;justify-content: center;overflow: hidden;
}
.box {width: 480px;height: 760px;// border: 1px solid #000;display: flex;justify-content: center;// margin-top: 50px;
}
.box_son {width: 425px;height: 600px;margin-top: 30px;// border: 1px solid yellow;
}
.titles {font-size: 20px;font-weight: 800;display: flex;justify-content: center;margin-top: 10px;
}
.zhunasd {font-size: 20px;font-family: Microsoft YaHei;font-weight: 800;text-align: center;
}
.once {width: 100%;display: flex;justify-content: space-between;margin-top: 20px;font-size: 17px;font-family: Microsoft YaHei;font-weight: 500;// border: 1px solid #000;
}
.contents {width: 70%;height: 160px;// border: 1px solid red;line-height: 56px;
}
.photos {width: 30%;height: 160px;// border: 1px solid blue;
}
.tables {width: 425px;margin-top: 20px;height: 180px;
}
.footers {margin-top: 20px;
}
.footers_one {margin-top: 10px;
}
.footers_two {margin-top: 10px;
}
/style
综上就是全部的实现的内容
