如何在Node中将PDF每页转换为图片以及PDF各种操作

记录如何在node中将PDF每页转换为图片格式

先介绍几个库

  • 1、pdf-lid: 这个库是基于pdf.js和pdfkit的、文档健全、操作方便、Api调用简介。可以对PDF进行提取、编辑、增删改查。
  • 2、pdf2pic: 这个库用于将PDF每页转为图片但是不能进行PDF的一系列加工但是这并不影响他的强大
  • 3、pdf.js: 这个库是一个处理PDF非常强大的库、可以对PDF进行一系列操作、也可用于web端渲染PDF每页。
  • 4、pdfmake: 主要生成PDF、可以对生成的内容进行精细化的加工
  • 5、pdfkit: 这也是用与生成PDF的一个库、个人觉得生成PDF还是pdfmake方便一点

接下来贴一点代码片段如何在node以及web中将PDF文档逐页转换为图片并获取他们的编码数据

  • Node
    在node中我们主要用到两个库pdf-lib、和pdf2pic
    pdf-lib主要用于获取页面的关键信息.
    pdf2pic主要用于将pdf转为图片但是使用之前需要先安装两个程序步骤可以按照这个来:安装步骤(必须安装)
    话不多说直接上代码:
    给大家看下代码目录结构
    在这里插入图片描述
    是不是特别简单
    冲冲冲 <-_->
    代码
/* 
步骤:
1、npm init -y
2、npm i pdf2pic pdf-lib fs-extra
*/
const { fromPath, fromBuffer } = require('pdf2pic')
const { PDFDocument } = require('pdf-lib')
const fs = require('fs')
const fsExtra = require('fs-extra') // npm i 

// pdf-lib要求file必须是Buffer 所以我们先用fs模块获取PDF的Buffer格式
const pdfBuffer = fs.readFileSync('hello.pdf') // 这里我们就直接同步获取了

const pdfToImage = async (pdfBuffer, savePath) => {
  try {
    if (!fsExtra.pathExistsSync(savePath)) fsExtra.ensureDirSync(savePath)

    const baseOptions = {
      density: 330, // 图片缩放比例
      saveFilename: 'untitled', // 图片保存前缀名
      format: 'png', // 图片格式
      savePath, // 保存路径
    }

    let imgBufferList = [], imgBase64List = []

    // 获取PDF 
    const pdfDoc = await PDFDocument.load(pdfBuffer, { ignoreEncryption: true }) // ignoreEncryption: true 用于获取加密文档 但是有一定的风险


    // 获取PDF所有页面
    const pages = await pdfDoc.getPages()

    // 循环处理页面达到我们想要的效果(此处我们只是将页面转为图片并存储)
    for (let [pageIndex, page] of pages.entries()) {
      // 获取页面的尺寸
      const { width, height } = await page.getSize()

      // 接下来开始转换 可以从很多格式转换 具体看这个文档 https://github.com/yakovmeister/pdf2pic-examples
      const toImageOptions = { ...baseOptions, width, height }

      // 1、保存图片
      const storeAsImage = fromBuffer(pdfBuffer, toImageOptions);
      storeAsImage(pageIndex + 1).then(({ path }) => {
        // 获取图片Buffer
        const data = fs.readFileSync(path)
        imgBufferList.push({ page: pageIndex + 1, data })
        if (pageIndex + 1 === pages.length) {
          console.log(imgBufferList)
        }
      }).catch(err => {
        console.log(`${pageIndex + 1}页转换失败`);
        console.log(err)
      })

      // 2、直接获取图片的base64 
      new Promise(async (resolve, reject) => {
        const [{ base64: data }] = await fromBuffer(pdfBuffer, toImageOptions).bulk(pageIndex + 1, true)
        if (data) resolve({ pageIndex, data })
        else reject()
      }).then(({ data }) => {
        imgBase64List.push({ page: pageIndex + 1, data })
        if (pageIndex + 1 === pages.length) {
          console.log(imgBase64List);
        }
      }).catch(err => {
        console.log(`${pageIndex + 1}页转换失败`);
        console.log(err)
      })
    }
  } catch (err) {
    console.log(err);
  }
}
pdfToImage(pdfBuffer, './images')
  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要将SVG文件转换PDF,您可以使用`canvg`库将SVG绘制到HTML5 Canvas上,然后使用`jsPDF`库将Canvas内容转换PDF。以下是实现此操作的步骤: 1. 在HTML页面中引入`canvg`和`jsPDF`库: ```html <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> ``` 2. 使用`canvg`将SVG绘制到Canvas上: ```javascript // 获取SVG元素 var svg = document.getElementById('my-svg'); // 创建Canvas元素 var canvas = document.createElement('canvas'); canvas.width = svg.clientWidth; canvas.height = svg.clientHeight; // 将SVG绘制到Canvas上 canvg(canvas, svg.outerHTML); ``` 3. 使用`jsPDF`将Canvas内容转换PDF: ```javascript // 创建PDF文档 var pdf = new jsPDF(); // 将Canvas内容添加到PDFpdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, canvas.width, canvas.height); // 保存PDF文件 pdf.save('my-pdf.pdf'); ``` 完整的代码示例: ```html <!DOCTYPE html> <html> <head> <title>SVG to PDF Conversion</title> <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> </head> <body> <svg id="my-svg" width="200" height="200"> <rect x="50" y="50" width="100" height="100" fill="red" /> </svg> <script> var svg = document.getElementById('my-svg'); var canvas = document.createElement('canvas'); canvas.width = svg.clientWidth; canvas.height = svg.clientHeight; canvg(canvas, svg.outerHTML); var pdf = new jsPDF(); pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, canvas.width, canvas.height); pdf.save('my-pdf.pdf'); </script> </body> </html> ``` 注意,由于`canvg`库使用了HTML5 Canvas元素,因此此方法可能不适用于非浏览器环境(例如Node.js)。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值