JS PDF预览|极客笔记

JS PDF预览

在前端开发中，有时候我们需要实现网页中生成并预览 PDF 的功能，JS PDF 就是一个很好用的工具。本文将详细介绍如何使用 JS PDF 在网页中生成和预览 PDF 文档。

什么是 JS PDF？

JS PDF 是一个用于在网页中生成 PDF 文件的 JavaScript 库。它不依赖于任何服务器端的组件，纯粹使用客户端的 JavaScript 代码就可以生成 PDF 文件，非常方便。

如何集成 JS PDF？

要使用 JS PDF，首先需要在项目中引入 jsPDF 库。可以通过 CDN 或下载到本地然后引入。

<script src="https://cdn.jsdelivr.net/npm/jspdf/dist/jspdf.umd.min.js"></script>

创建 PDF 文件

使用 JS PDF 创建 PDF 文件非常简单，可以通过以下代码实现：

var doc = new jsPDF();

doc.text("Hello World!", 10, 10);

doc.save("hello.pdf");

以上代码创建了一个包含 “Hello World!” 文字的 PDF 文件，并将其保存为 hello.pdf。你可以调整文字的位置、字体大小、颜色等属性。

添加内容

除了文字之外，还可以向 PDF 文件中添加图片、表格等内容。下面是一个添加图片的示例：

var doc = new jsPDF();

doc.addImage("path/to/image.jpg", "JPEG", 10, 10, 50, 50);

doc.save("image.pdf");

预览 PDF

要在网页中预览生成的 PDF 文件，可以将 PDF 文件转换为 Data URL，并将其嵌入到 <iframe> 标签中。

var doc = new jsPDF();

doc.text("Hello World!", 10, 10);

var pdfData = doc.output('datauristring');
var iframe = "<iframe width='100%' height='100%' src='" + pdfData + "'></iframe>";

document.body.innerHTML = iframe;

完整示例

下面是一个完整的示例，演示了如何使用 JS PDF 在网页中生成和预览 PDF 文件。

<!DOCTYPE html>
<html>
<head>
    <title>JS PDF Preview</title>
    <script src="https://cdn.jsdelivr.net/npm/jspdf/dist/jspdf.umd.min.js"></script>
</head>
<body>
    <button onclick="generatePDF()">Generate PDF</button>
    <script>
        function generatePDF() {
            var doc = new jsPDF();

            doc.text("Hello World!", 10, 10);

            var pdfData = doc.output('datauristring');
            var iframe = "<iframe width='100%' height='100%' src='" + pdfData + "'></iframe>";

            document.body.innerHTML = iframe;
        }
    </script>
</body>
</html>