云栖建站,网站开发毕设论文,海南网站推广,网站设计制作 联系尝试了集中图片转pdf的方式#xff0c; #xff08;1#xff09;最终较为优秀的一种是使用jspdf将图片转为pdf#xff0c;支持JPG/JPEG/PNG/BMP/TIF/TIFF图片格式转换#xff0c;详见我的另一篇文章#xff1a; https://blog.csdn.net/Ann_52547/article/details/1322149…尝试了集中图片转pdf的方式 1最终较为优秀的一种是使用jspdf将图片转为pdf支持JPG/JPEG/PNG/BMP/TIF/TIFF图片格式转换详见我的另一篇文章 https://blog.csdn.net/Ann_52547/article/details/132214909?spm1001.2014.3001.5502
2使用print-js插件去看看
3pdfMake图片转pdf支持JPG/JPEG/PNG图片格式转换去看看
4html2canvas转出来的图片模糊需要处理啊我没处理去看看 2print-js图片转pdf
npm安装print-js依赖
main.js:
import print from print-js使用
printJS({// blob链接 数组printable: [blob:http//.....],// 打印类型 目前为图片样式 可以根据上面的网址进行修改 type: pdf,// 二维码样式 可以自己进行修改imageStyle: margin:0px; padding:0px; width:40%; height:40%; display: block; margin: 0 auto; padding-top:12%// 也可以设置以下参数 继承所有css样式 没试过image的 html的效果不错// targetStyles:[*]})3pdfMake图片转pdf
安装pdfMake依赖
async convertToPDF(blob, id) {let this_ thislet base64Data await this.readFile(blob);const docDefinition {content: [{ image: base64Data, fit: [190, 277], alignment: center } //width: 400,]}const pdfDocGenerator pdfMake.createPdf(docDefinition)pdfDocGenerator.getBlob(pdfBlob {console.log(这是pdf的blob格式-----pdfBlob);// 可以在这里使用blob比如将其转换为Blob URLlet url window.URL.createObjectURL(new Blob([pdfBlob], { type: application/pdf }))});
},//blob转base64
readFile(file) {return new Promise((resolve, reject) {const reader new FileReader();reader.onload function () {const contents reader.result;resolve(contents);};reader.onerror function (event) {reject(event.target.error);};reader.readAsDataURL(file);});
},其他一些转化方法
//ArrayBuffer转换为Base64
arrayBufferToBase64(arrayBuffer) {const uint8Array new Uint8Array(arrayBuffer);let binaryString ;for (let i 0; i uint8Array.length; i) {binaryString String.fromCharCode(uint8Array[i]);}return btoa(binaryString);
},4html2canvas图片转pdf
安装依赖
div v-for(item, index) in list :keyindeximg :idimageContaineritem.id :srcitem.imgurl alt /
/divasync imgToPdf(imgUrl, id) {// 将图片渲染为Canvas//因为img标签是循环展示图片的通过id判断是哪个img标签const canvas await html2canvas(window.document.getElementById(imageContainerid))// 获取Canvas的DataURLconst imageURL canvas.toDataURL(image/png)//const imageURL canvas.toDataURL(imgUrl)// 创建PDF实例并设置纸张大小const pdf new jsPDF(p, px, a4)// 计算图片在PDF中的宽度和高度const pdfWidth pdf.internal.pageSize.getWidth()const pdfHeight (canvas.height * pdfWidth) / canvas.width// 将图片添加到PDF中pdf.addImage(imageURL, JPEG, 0, 0, pdfWidth, pdfHeight)pdf.save()const blob new Blob([pdf], { type: application/PDF })console.log(生成的pdf的blob文件---,blob)},
