数据表更改 PDF 的页面大小 - JavaScript

在使用 JavaScript 处理 PDF 文件的过程中，我们可能会遇到需要更改 PDF 页面大小的需求。本文将介绍如何使用 JavaScript 更改 PDF 页面大小。

使用 pdf.js 库

pdf.js 是一个用于处理 PDF 文件的 JavaScript 库，可以直接在浏览器中渲染 PDF 文件并提供一系列 API 进行操作。其中就包括更改 PDF 页面大小的 API。

安装 pdf.js

使用 npm 安装 pdf.js：

npm install pdfjs-dist

加载 PDF 文件

可以使用 fetch 或 XMLHttpRequest 加载 PDF 文件，然后使用 pdf.js 进行渲染：

import * as pdfjsLib from 'pdfjs-dist';

const url = 'https://example.com/sample.pdf';

pdfjsLib.getDocument(url).promise.then((pdf) => {
  // 渲染第一页
  pdf.getPage(1).then((page) => {
    const canvas = document.createElement('canvas');
    const viewport = page.getViewport({ scale: 1 });

    // 更改页面大小
    viewport.width = 612;
    viewport.height = 792;

    const canvasContext = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // 渲染页面内容
    page.render({
      canvasContext,
      viewport,
    });
      
    // 将 canvas 转换为 PDF
    const outputPdf = new jsPDF({
      orientation: 'portrait',
      unit: 'pt',
      format: [viewport.width, viewport.height],
    });
    const imgData = canvas.toDataURL('image/png');
    outputPdf.addImage(imgData, 'PNG', 0, 0);
    outputPdf.save('output.pdf');
  });
});

上述代码中，我们使用 pdfjsLib.getDocument() 方法获取 PDF 文档对象，并使用 getPage() 方法获取第一页的对象。接着，我们使用 getViewport() 方法获取页面的视图及尺寸，并更改其宽度和高度。

然后，我们创建一个 canvas 元素，并将其尺寸设置为页面的宽度和高度。接下来，我们使用 page.render() 方法将页面内容渲染到 canvas 上。

最后，我们使用 jsPDF 库将 canvas 转换为 PDF，使用 save() 方法下载生成的 PDF 文件。

设置页面大小

在上述代码中，我们使用 getViewport() 方法获取文档页面的视图并更改宽度和高度：

const viewport = page.getViewport({ scale: 1 });

// 更改页面大小
viewport.width = 612;
viewport.height = 792;

其中，width 和 height 分别表示 PDF 页面的宽度和高度，以 pt 为单位。该方法还可以接受一个 options 对象，通过设置 scale 属性实现放大和缩小 PDF 页面。

将 canvas 转换为 PDF

使用 pdf.js 渲染页面后，我们可以将 canvas 转换为 PDF。这里我们使用 jsPDF 库创建 PDF 对象，并使用 addImage() 方法将 canvas 添加到 PDF 页面上，最后使用 save() 方法将 PDF 文件下载到本地。

const outputPdf = new jsPDF({
  orientation: 'portrait',
  unit: 'pt',
  format: [viewport.width, viewport.height],
});
const imgData = canvas.toDataURL('image/png');
outputPdf.addImage(imgData, 'PNG', 0, 0);
outputPdf.save('output.pdf');

addImage() 方法接受四个参数：

• imageData：要添加到 PDF 的图像数据（base64 编码或链接）
• format：图像格式，支持 JPEG 和 PNG
• x：图像在页面上的 x 坐标
• y：图像在页面上的 y 坐标

在这里，我们将图像添加到 PDF 的左上角位置，使用 PNG 格式添加图像。

总结

使用 pdf.js 库，我们可以在浏览器中渲染 PDF 文件，并且可以更改 PDF 页面的尺寸。除此之外，pdf.js 还提供了许多其他功能，如文本提取、注释等，可以帮助我们更方便地处理 PDF 文件。