利用jsPDF实现将图片转为pdf

 更新时间:2023年08月13日 10:23:35   作者:Ann_R  
这篇文章主要为大家详细介绍了如何利用jsPDF实现将图片转为pdf的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下

安装依赖并引入

import jsPDF from 'jspdf';
import { PDFDocument,  } from 'pdf-lib';

注意一、

jspdf将图片(jpg/jpeg/png/bmp)转pdf(记为pdfA),得到的pdf(pdfA)和需要合并的pdf(记为pdfB)类型不一致,需要将pdfA转为pdfB类型,才能合并,使用arraybuffer转,具体如下

// pdf--pdfA--是使用jspdf将图片生成的pdf
// file--pdfB--是合并pdf需要的pdf格式
const jsPdfBytes = pdf.output('arraybuffer');
const file = await PDFDocument.load(jsPdfBytes);

注意二、

jspdf 可转pdf的图片类型有jpg、jpeg、png、bpm,不支持 tif 和 tiff 图片类型

.tif和.tiff格式的文件需要通过安装依赖

“tiff.js”: “^1.0.0”,

也是使用arrayBuffer,将图片格式转为base64,(jpg/jpeg格式,然后将该格式通过jspdf转为pdf文件)

if(x.FILE_TYPE == '.tif' || x.FILE_TYPE == '.tiff' ){
     const response = await fetch(imgUrl);
     const buffer = await response.arrayBuffer();
     const Tiff = require("tiff.js");
     const tiff = new Tiff({ buffer });
     imgUrl = tiff.toDataURL();
}

注意三、

async/await 和 new Promise 控制异步任务顺序执行,执行完imgToPdf()方法,再执行合并pdf 方法

注意四、

jspdf 将图片转为pdf,注意图片大小的自适应,可以通过设置图片的最大宽度来控制图片自适应的大小

const imageWidth = 100;

注意五、

因为异步任务执行可能导致批量选择文件的顺序与实际获得的文件顺序不一致,所以获取到的this.pdfFileArr,需要通过id 调整为正确的pdf文件打印顺序

图片转pdf代码:

async imgToPdf(arr) {
      const promises = [];
      arr.forEach(async (x)=>{
        const promise = new Promise(async (resolve,reject)=>{
          //jsPdf 仅支持JPG/JPEG/PNG/BMP格式,不支持tif
          let id = x.ID
          let imgUrl = window.URL.createObjectURL(x.FILE)
          //如果是tif或者tiff文件,需要转化后再进行 图片转pdf操作
          if(x.FILE_TYPE == '.tif' || x.FILE_TYPE == '.tiff' ){
            const response = await fetch(imgUrl);
            const buffer = await response.arrayBuffer();
            const Tiff = require("tiff.js");
            const tiff = new Tiff({ buffer });
            imgUrl = tiff.toDataURL();
          }
          const pdf = new jsPDF();
          //添加header
          //pdf.text('PDF Header', 10, 10);
          // 将图片绘制到pdf中
          const imageWidth = 100; // 设定图片的最大宽度
          const imageHeight = 0; // 设置为 0,将根据宽度等比例计算高度
          const img = new Image();
          img.src = imgUrl
          let finalWidth = imageWidth;
          let finalHeight = imageHeight;
          img.onload = function () {
            const width = img.width;
            const height = img.height;
            // 计算图片适应 PDF 页面的尺寸
            const aspectRatio = width / height;
            if (finalHeight === 0) {
              finalHeight = finalWidth / aspectRatio;
            } else if (finalWidth === 0) {
              finalWidth = finalHeight * aspectRatio;
            }
          };
          // 添加图片到 PDF
          pdf.addImage(imgUrl, 'JPEG', 10, 10, finalWidth, finalHeight, null, 'SLOW')
          const jsPdfBytes = pdf.output('arraybuffer');
          const file = await PDFDocument.load(jsPdfBytes);
          //const blob = new Blob([file], { type: 'application/PDF' })
          let obj = {
            ID: id,
            FILE: file
          }
          console.log("执行了------imgToPdf")
          resolve(obj)
        }).then((obj)=>{
          this.pdfFileArr.push(obj)
        }).catch((error)=>{
          this.loadLoading = false
          alert('错误信息为:'+error)
        })
        promises.push(promise);
      })
      return Promise.all(promises)
    },

合并pdf代码

async mergePdf(sortList) {
      console.log('最终需要合并的pdf数组', sortList)
      let files = sortList
      // 创建一个新的PDF文档
      const mergedPdf = await PDFDocument.create();
      // 遍历选择的每个文件
      for (let i = 0; i < files.length; i++) {
       /**
		这里为.pdf 文件的遍历操作
		通过FileReader 读取.pdf文件,转为合并pdf所需要的pdf类型
        const file = files[i];
        const url = window.URL.createObjectURL(file)
        const reader = new FileReader();
        // 读取文件内容
        const fileContents = await new Promise((resolve, reject) => {
          reader.onload = function (event) {
            resolve(event.target.result);
          };
          reader.onerror = function (event) {
            reject(new Error("文件读取错误。"));
          };
          reader.readAsArrayBuffer(file); //blob
        });
        // 将PDF文件添加到合并的PDF文档中
        const pdf = await PDFDocument.load(fileContents);
        console.log("合并pdf---", pdf)
        **/
        const pdf = files[i];
        const copiedPages = await mergedPdf.copyPages(
          pdf,
          pdf.getPageIndices()
        );
        copiedPages.forEach((page) => {
          mergedPdf.addPage(page);
        });
      }
      const uint8Array = await mergedPdf.save();
      let mergeBuffer = Buffer.from(uint8Array);
      const url = window.URL.createObjectURL(new Blob([mergeBuffer], { type: 'application/pdf;charset=utf-8' }));
      this.mergePdfUrl = url
      console.log("pdf合并完成")
      console.log("新合并的pdf--", url)
      console.log("新合并的pdf--", mergedPdf)
    },

将获得的pdf文件url给iframe即可预览,iframe 自带toolbar工具栏打印

<iframe ref="printPdf"  id="printIframe" 
            style="overflow:hidden;filter: Chroma(Color=white);border: none;width: 100%; height: 100%"
            :src="item.url + '#toolbar=0'"></iframe>
            <!-- #view=FitH,top -->

如果自己编写打印接口,可以通过id获取到该iframe,调起 contentWindow.print() 即可打印该dom元素

document.getElementById('printIframe').contentWindow.print();

到此这篇关于利用jsPDF实现将图片转为pdf的文章就介绍到这了,更多相关jsPDF图片转pdf内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript prototype属性详解

    JavaScript prototype属性详解

    这篇文章主要为大家详细介绍了JavaScript prototype属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 关于恒等于(===)和非恒等于(!==)

    关于恒等于(===)和非恒等于(!==)

    关于恒等于(===)和非恒等于(!==)...
    2007-08-08
  • 前端检测用户登录状态是否过期的几种方法

    前端检测用户登录状态是否过期的几种方法

    这篇文章主要介绍了在前端开发中判断用户登录状态是否过期的方法,包括检查令牌有效期、定时轮询服务器、全局请求拦截器和利用Web存储中的时间戳,文章还讨论了在特定场景下如何实现优雅降级,以避免中断用户操作,需要的朋友可以参考下
    2024-11-11
  • Js实现京东无延迟菜单效果实例(demo)

    Js实现京东无延迟菜单效果实例(demo)

    本篇文章主要介绍了Js实现京东无延迟菜单效果实例(demo) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • JS的千分位算法实现思路

    JS的千分位算法实现思路

    本文为大家讲解下JS的千分位算法的具体实现,先去除空格,判断是否空值和非数;针对是否有小数点,分情况处理;感兴趣的朋友可以参考下
    2013-07-07
  • JavaScript数组去重和扁平化函数介绍

    JavaScript数组去重和扁平化函数介绍

    这篇文章主要介绍了JavaScript数组去重和扁平化函数,数组扁平化又称数组降维,下面文章围绕数组去重和扁平化函数得相关资料展开内容,需要的朋友可以参考一下
    2021-12-12
  • 鼠标经过显示二级菜单js特效

    鼠标经过显示二级菜单js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下
    2013-08-08
  • JavaScript常用基础知识强化学习

    JavaScript常用基础知识强化学习

    这篇文章主要介绍了JavaScript常用基础知识强化学习,需要的朋友可以参考下
    2015-12-12
  • Javascript操作select控件代码实例

    Javascript操作select控件代码实例

    这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 基于匀速运动的实例讲解(侧边栏,淡入淡出)

    基于匀速运动的实例讲解(侧边栏,淡入淡出)

    下面小编就为大家带来一篇基于匀速运动的实例讲解(侧边栏,淡入淡出)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论