vue 图片转pdf

尝试了集中图片转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_ = 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)
    },