html转换成pdf代码,HTML转成PDF的4个方法介绍(附代码)

本篇文章给大家带来的内容是关于把HTML转成PDF的4个方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。在本文中,我将展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。背景:几个月前,一个客户要求我们开发一个功能,用户可以得到 PDF 格式的 React 页面内容。...
摘要由CSDN通过智能技术生成

本篇文章给大家带来的内容是关于把HTML转成PDF的4个方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在本文中,我将展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。

背景:几个月前,一个客户要求我们开发一个功能,用户可以得到 PDF 格式的 React 页面内容。该页面基本上是患者病例的报告和数据可视化结果,其中包含许多 SVG。另外还有一些特殊的请求来操纵布局,并对 HTML 元素进行一些重新排列。因此与原始的 React 页面相比,PDF 中应该有不同的样式和额外的内容。

由于这个任务比用简单的 CSS 规则解决要复杂得多,所以我们先探讨了可能的实现方法。我们找到了 3 个主要解决方案。这篇博文将指导你了解它们的可能性并最终实施。

在客户端还是服务器端生成?

在客户端和服务器端都可以生成PDF文件。但是让后端处理它可能更有意义,因为你并不想耗尽用户浏览器可以提供的所有资源。

即便如此,我仍然会展示这两种方法的解决方案。

方案1:从 DOM 制作屏幕截图

乍一看,这个解决方案似乎是最简单的,事实证明的确是这样,但它有其自身的局限性。如果你没有特殊需求,例如在 PDF 中选择文本或对文本进行搜索,那么这就是一种简单易用的方法。

此方法简单明了:从页面创建屏幕截图,并把它放到 PDF 文件中。非常直截了当。我们可以使用两个包来实现:Html2canvas,根据 DOM 生成截图

jsPdf,一个生成PDF的库

开始编码:

npm install html2canvas jspdfimport html2canvas from 'html2canvas'

import jsPdf from 'jspdf'

function printPDF () {

const domElement = document.getElementById('your-id')

html2canvas(domElement, { onclone: (document) => {

document.getElementById('print-button').style.visibility = 'hidden'

}})

.then((canvas) => {

const img = canvas.toDataURL('image/png')

const pdf = new jsPdf()

pdf.ad

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值