前端下载PDF的完整实现

一、使用PDF.js预览和下载PDF文件

Pdf.js是一个由Mozilla开发的JavaScript库，可以在Web上直接预览PDF文件。它提供了比浏览器默认的预览PDF更多的功能，如缩放、旋转、打印等。

在这里，我们可以使用Pdf.js轻松实现PDF预览和下载：

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>


<div id="pdf-container"></div>

<script>
  // 远程 PDF 文件 URL
  const pdfUrl = 'https://example.com/file.pdf';

  // 获取 DOM 元素
  const container = document.querySelector('#pdf-container');

  // 加载 PDF 文件
  pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
    // 获取第 1 页
    return pdf.getPage(1);
  }).then(page => {
    // 设置缩放比例
    const scale = 1.5;

    // 获取 canvas 渲染上下文
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = page.view[2] * scale;
    canvas.height = page.view[3] * scale;
    container.appendChild(canvas);

    // 渲染页面
    page.render({
      canvasContext: context,
      viewport: page.getViewport({ scale }),
    });

    // 创建下载按钮
    const downloadBtn = document.createElement('a');
    downloadBtn.href = pdfUrl;
    downloadBtn.download = 'file.pdf';
    downloadBtn.textContent = 'Download';

    // 将下载按钮添加到 DOM 中
    container.appendChild(downloadBtn);
  });
</script>

二、使用jsPDF生成PDF文件并下载

jsPDF是一个纯JavaScript库，它可以在客户端创建PDF文件。它不需要服务器处理，只需要在客户端生成即可。

我们可以通过以下代码使用jsPDF生成并下载PDF文件：

// 引入 jsPDF 库
import jsPDF from 'jspdf';

// 创建 PDF 对象
const doc = new jsPDF();

// 添加内容
doc.text('Hello, jsPDF!', 10, 10);

// 下载文件
doc.save('file.pdf');

除了文本之外，jsPDF还支持更多的内容类型，如图像、表格等，使PDF生成更加丰富。

三、使用pdfmake生成高质量PDF文件

pdfmake是一个比jsPDF功能更强大的JavaScript库，可以用于生成高质量的PDF文件。它支持更多的样式和内容类型，如Markdown、HTML、表格、图像等。此外，它还提供了更多的排版和布局选项。

我们可以使用pdfmake在线预览和生成PDF文件，或者将其集成到我们的应用程序中，生成和下载PDF文件。

以下是一个使用pdfmake创建PDF文件的示例：

// 引入 pdfmake 库
import pdfMake from 'pdfmake';

// 创建 doc 定义对象
const docDefinition = {
  content: [
    { text: 'This is a heading', style: 'header' },
    'This is a paragraph',
    {
      ul: [
        'Item 1',
        'Item 2',
        'Item 3',
      ]
    }
  ],
  styles: {
    header: {
      fontSize: 22,
      bold: true,
      margin: [0, 0, 0, 10],
    },
  },
};

// 创建 PDF 文档
const doc = pdfMake.createPdf(docDefinition);

// 下载 PDF 文件
doc.download('file.pdf');

四、结语

在前端应用中，PDF文件广泛应用于打印、扫描、阅读、表单提交等场景。本篇文章介绍了3种前端下载PDF的方法，通过使用不同的库和工具都可以生成和下载PDF文件。

通过学习和应用这些库和工具，我们可以在前端应用中更好地使用和处理PDF文件，满足各种业务需求和用户需求。