vue实现图片转pdf的示例代码

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:['*']
      })

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);
},

<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)
    },