javascript 生成 pdf

原创

mob649e8158a948 2023-08-06 15:54:44 ©著作权

文章标签 HTML html 代码示例 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8158a948的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript生成PDF

在Web开发中，我们经常需要将页面内容以PDF的形式进行导出或打印。JavaScript提供了一些优秀的库和工具，可以帮助我们实现JavaScript生成PDF的功能。本文将介绍几种常用的方法和工具，以及相关的代码示例。

方法一：使用jsPDF库

[jsPDF]( 是一个流行的JavaScript库，可以在浏览器中生成PDF文件。

首先，我们需要在HTML文件中引入jsPDF库，可以通过CDN链接或下载到本地使用。以下是一个基本的HTML文件结构：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript生成PDF</title>
  <script src="
</head>
<body>
  JavaScript生成PDF
  <button onclick="generatePDF()">生成PDF</button>

  <script>
    function generatePDF() {
      var doc = new jsPDF();
      doc.text('Hello world!', 10, 10);
      doc.save('sample.pdf');
    }
  </script>
</body>
</html>

在上述代码中，我们引入了jsPDF库，并在generatePDF()函数中使用new jsPDF()创建了一个新的PDF文档对象。然后，使用text()方法在PDF中添加文本内容，并使用save()方法保存PDF文件。

点击“生成PDF”按钮后，将会自动下载名为sample.pdf的PDF文件，其中包含了一行文本“Hello world!”。

方法二：使用pdfmake库

[pdfmake]( 是另一个功能强大的JavaScript库，可以在浏览器中生成PDF文件，并支持更复杂的布局和样式。

与方法一类似，我们需要在HTML文件中引入pdfmake库。以下是一个使用pdfmake生成PDF的示例：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript生成PDF</title>
  <script src="
</head>
<body>
  JavaScript生成PDF
  <button onclick="generatePDF()">生成PDF</button>

  <script>
    function generatePDF() {
      var docDefinition = {
        content: [
          { text: 'Hello world!', fontSize: 16 }
        ]
      };
      pdfMake.createPdf(docDefinition).download('sample.pdf');
    }
  </script>
</body>
</html>

在上述代码中，我们使用pdfMake.createPdf()方法创建了一个新的PDF文档对象。docDefinition对象定义了PDF的内容和样式，通过download()方法进行下载。

点击“生成PDF”按钮后，将会自动下载名为sample.pdf的PDF文件，其中包含了一行文本“Hello world!”。