评论

纯前端图片合成PDF

多张图片合成单个pdf文件

功能

多页JPG,合并成1个pdf文件。

实现

1.安装pdf-lib

npm i pdf-lib

2.构建npm

微信小程序开发工具 : 工具 --> 构建npm

3.代码

代码片段:https://developers.weixin.qq.com/s/xGgmLumQ7aXC

工具函数:

async function pdfFn(imgArr{
  const {
      PDFDocument,
  } = require('pdf-lib'); //引入pdf-lib模块,转成pdf的时候用到
  //小程序端传来的图片数组
  let img_arr = imgArr;
  //arr是用来存储fileContent的数组
  let arr = [];
  
  //用来存储处理过后的各个图片信息的数组
  let content_arr = [];
  const doc = await PDFDocument.create();
  let page;
  // 下载图片 获取fileContent,并且存入arr数组
  for (let i = 0; i < img_arr.length; i++) {
      let lian = img_arr[i]
      let sBase64 = wx.getFileSystemManager().readFileSync(lian, 'base64');
      arr.push(sBase64);
  };
  // //获取所有照片组成的高度和宽度
  for (let j = 0; j < arr.length; j++) {
      //判断图片是png
      if (img_arr[j].match(/.png/g)) {
          let img = await doc.embedPng(arr[j]);
          //计算图片展示的宽高,根据原有的比例和pdf的宽度来算
          let h = (img.height * 700) / img.width;
          let obj = {
              img: img,
              width700,
              height: h,
          };
          content_arr.push(obj);
          zheight = parseInt( h);
      };
      //判断图片是jpg
      if (img_arr[j].match(/.jpg/g)) {
          let img = await doc.embedJpg(arr[j]);
          //计算图片展示的宽高,根据原有的比例和pdf的宽度来算
          let h = (img.height * 700) / img.width;
          let obj = {
              img: img,
              width: img.width,
              height: img.height,
          };
          content_arr.push(obj);
      };
      //判断如果图片不是png或者jpg。则返回提示
      if (!img_arr[j].match(/.jpg/g) && !img_arr[j].match(/.png/g)) {
          let str = '图片只支持jpg和png格式'
          return str
      };
  };
  //开始绘制
  for (let i = 0; i < content_arr.length; i++) {
      page = doc.addPage();
      page.setWidth(content_arr[i].width);
      page.setHeight(content_arr[i].height);
      page.drawImage(content_arr[i].img, {
          x30//左右间隔
          y30,
          width: content_arr[i].width,
          height: content_arr[i].height,
      });
  };
  const docBase64 = await doc.saveAsBase64();
  return {
      docBase64,
  };


小程序调用:

//  pages/index/index.js  
convert(){
    let arr = ['pages/static/1.jpg','pages/static/2.jpg']
    pdfFn(arr).then(res => {
      const fs = wx.getFileSystemManager();
      fs.writeFile({
        filePath:wx.env.USER_DATA_PATH +'/sample2.pdf',
        data:res.docBase64,
        encoding:"base64",
        successresx => {
          console.log('okk',resx)
          wx.openDocument({
            filePath: wx.env.USER_DATA_PATH + '/sample2.pdf',
            showMenu:true,
            success:function(res){
              console.log('open success')
            }
          })
          return wx.env.USER_DATA_PATH + '/sample2.pdf'
        }
      })
    })
  }


最后一次编辑于  01-26  
点赞 5
收藏
评论

2 个评论

  • 启年
    启年
    02-08

    点赞收藏

    02-08
    赞同
    回复
  • Cooper
    Cooper
    01-26

    挺实用的

    01-26
    赞同
    回复
登录 后发表内容