前端如何轻松生成PDF？超实用的技术大公开！

2023-06-03 19:36:37

前端PDF生成指南：轻松实现网页内容转PDF

一、HTML转PDF：轻松转换网页内容

生成PDF的第一步是将HTML代码转换为PDF格式。使用HTML2PDF库，这一过程变得轻而易举。HTML2PDF将HTML代码作为输入，输出一个PDF文档对象。

代码示例：

// 引入HTML2PDF库
const html2pdf = require('html2pdf.js');

// 将HTML代码转换为PDF文档
const pdfDoc = html2pdf.convert(htmlCode);

// 将PDF文档保存到本地
pdfDoc.save('my-document.pdf');

二、CSS转PDF：掌控文档外观

除了HTML代码，CSS样式表也能影响PDF文档的外观。使用CSS，你可以设置字体、颜色、布局等样式属性。

代码示例：

/* 设置字体 */
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* 设置颜色 */
h1 {
  color: #FF0000;
}

/* 设置布局 */
.container {
  width: 80%;
  margin: 0 auto;
}

三、JavaScript生成PDF：动态生成定制化文档

使用JavaScript，你可以动态生成PDF文档，并根据需要调整其内容和外观。

代码示例：

// 创建一个新的PDF文档
const doc = new jsPDF();

// 添加文本
doc.text(20, 20, 'Hello, world!');

// 添加图像
doc.addImage('image.png', 'PNG', 20, 40, 100, 100);

// 保存PDF文档
doc.save('my-document.pdf');

四、实战演练：实现页面导出PDF

1. 安装HTML2PDF库

npm install html2pdf.js

2. 创建HTML页面

<html>
<head>
  
</head>
<body>
  <h1>我是标题</h1>
  <p>我是内容</p>
</body>
</html>

3. 生成PDF

const html2pdf = require('html2pdf.js');

const html = fs.readFileSync('my-page.html', 'utf-8');
const pdfDoc = html2pdf.convert(html);

pdfDoc.save('my-document.pdf');