快捷導(dǎo)航

vue實現(xiàn)圖片轉(zhuǎn)pdf的示例代碼

更新時間：2023年08月13日 10:35:46 作者：Ann_R

這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片轉(zhuǎn)pdf的相關(guān)知識，文中的示例代碼講解詳細，具有一定的借鑒價值，需要的小伙伴可以跟隨小編一起了解一下

1.前言

嘗試了集中圖片轉(zhuǎn)pdf的方式，

（1）最終較為優(yōu)秀的一種是使用jspdf將圖片轉(zhuǎn)為pdf，支持JPG/JPEG/PNG/BMP/TIF/TIFF圖片格式轉(zhuǎn)換，詳見我的另一篇文章：利用jsPDF實現(xiàn)將圖片轉(zhuǎn)為pdf

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

（3）pdfMake圖片轉(zhuǎn)pdf，支持JPG/JPEG/PNG圖片格式轉(zhuǎn)換，去看看

（4）html2canvas，轉(zhuǎn)出來的圖片模糊，需要處理啊，我沒處理，去看看

2.print-js圖片轉(zhuǎn)pdf

npm安裝print-js依賴

main.js:

import print from 'print-js'

使用：

printJS({
        // blob鏈接 數(shù)組
        printable: ['blob:http//.....'],
        // 打印類型 目前為圖片樣式 可以根據(jù)上面的網(wǎng)址進行修改 
        type: 'pdf',
        // 二維碼樣式 可以自己進行修改
        imageStyle: 'margin:0px; padding:0px; width:40%; height:40%; display: block; margin: 0 auto; padding-top:12%'
        // 也可以設(shè)置以下參數(shù) 繼承所有css樣式 沒試過image的 html的效果不錯
        // targetStyles:['*']
      })

3.pdfMake圖片轉(zhuǎn)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，比如將其轉(zhuǎn)換為Blob URL
   		let url = window.URL.createObjectURL(new Blob([pdfBlob], { type: 'application/pdf' }))
 	});
},
//blob轉(zhuǎn)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);
  });
},

其他一些轉(zhuǎn)化方法

//ArrayBuffer轉(zhuǎn)換為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圖片轉(zhuǎn)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標(biāo)簽是循環(huán)展示圖片的，通過id判斷是哪個img標(biāo)簽
      const canvas = await html2canvas(window.document.getElementById('imageContainer'+id))
      // 獲取Canvas的DataURL
      const imageURL = canvas.toDataURL('image/png')
      //const imageURL = canvas.toDataURL(imgUrl)
      // 創(chuàng)建PDF實例并設(shè)置紙張大小
      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)
    },

到此這篇關(guān)于vue實現(xiàn)圖片轉(zhuǎn)pdf的示例代碼的文章就介紹到這了,更多相關(guān)vue圖片轉(zhuǎn)pdf內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: