当前位置：首页 > news >正文

vue 图片转pdf

news 2025/7/19 5:16:04

尝试了集中图片转pdf的方式，
（1）最终较为优秀的一种是使用jspdf将图片转为pdf，支持JPG/JPEG/PNG/BMP/TIF/TIFF图片格式转换，详见我的另一篇文章：
https://blog.csdn.net/Ann_52547/article/details/132214909?spm=1001.2014.3001.5502

（2）使用print-js插件，去看看

（3）pdfMake图片转pdf，支持JPG/JPEG/PNG图片格式转换，去看看

（4）html2canvas，转出来的图片模糊，需要处理啊，我没处理，去看看

（2）print-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:['*']})

（3）pdfMake图片转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);
},

（4）html2canvas图片转pdf

安装依赖

<div v-for="(item, index) in list" :key="index"><img :id="'imageContainer'+item.id" :src="item.imgurl" alt="" />
</div>

async imgToPdf(imgUrl, id) {// 将图片渲染为Canvas//因为img标签是循环展示图片的，通过id判断是哪个img标签const canvas = await html2canvas(window.document.getElementById('imageContainer'+id))// 获取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)},