vue实现图片转pdf的示例代码
作者：Ann_R
这篇文章主要为大家详细介绍了vue实现图片转pdf的相关知识，文中的示例代码讲解详细，具有一定的借鉴价值，需要的小伙伴可以跟随小编一起了解一下
1.前言
尝试了集中图片转pdf的方式，
（1）最终较为优秀的一种是使用jspdf将图片转为pdf，支持JPG/JPEG/PNG/BMP/TIF/TIFF图片格式转换，详见我的另一篇文章：利用jsPDF实现将图片转为pdf
（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_ = this
let 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 URL
let 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的DataURL
const 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)
},到此这篇关于vue实现图片转pdf的示例代码的文章就介绍到这了,更多相关vue图片转pdf内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！