Comment convertir du HTML en PDF ? Présentation de la méthode

Dans cet article, je vais vous montrer comment générer un document PDF à partir d'une page React au style complexe à l'aide de Node.js, Puppeteer, Chrome sans tête et Docker.

Recommandations associées : "Tutoriel nodejs "

Contexte : Il y a quelques mois, un client nous a demandé de développer une fonction permettant aux utilisateurs d'obtenir React en PDF formater le contenu de la page. Cette page est essentiellement un rapport et une visualisation des données d'un cas de patient, avec de nombreux SVG inclus. Il existe également des requêtes spéciales pour manipuler la mise en page et effectuer certains réarrangements des éléments HTML. Il devrait donc y avoir un style différent et du contenu supplémentaire dans le PDF par rapport à la page React d'origine.

Étant donné que cette tâche est beaucoup plus complexe que de la résoudre avec de simples règles CSS, nous explorons d'abord les moyens possibles pour y parvenir. Nous avons trouvé 3 solutions principales. Cet article de blog vous guidera à travers leurs possibilités et leur éventuelle mise en œuvre.

Répertoire :

• Est-il généré côté client ou côté serveur ?
• Option 1 : faire des captures d'écran à partir du DOM
• Option 2 : utilisez simplement une bibliothèque PDF

• Option finale 3 : Node.js, Puppeteer et Headless Chrome

  • Contrôle du style
  • Envoyer le fichier au client et enregistrer
• Utiliser Puppeteer dans Docker
• Option 3 +1 : Impression CSS les règles
• Résumé

Sont-elles générées côté client ou côté serveur ?

Les fichiers PDF peuvent être générés à la fois côté client et côté serveur. Mais il est probablement plus logique de laisser le backend s’en charger, puisque vous ne voulez pas utiliser toutes les ressources que le navigateur de l’utilisateur peut fournir.

Même ainsi, je montrerai toujours la solution pour les deux méthodes.

Option 1 : Faire une capture d'écran à partir du DOM

À première vue, cette solution semble être la plus simple, et il s'avère que c'est le cas, mais elle a la sienne limites. Il s'agit d'une méthode facile à utiliser si vous n'avez pas de besoins particuliers, comme sélectionner du texte dans un PDF ou effectuer une recherche sur du texte.

La méthode est simple et directe : créez une capture d'écran de la page et placez-la dans un fichier PDF. Très simple. Nous pouvons utiliser deux packages pour y parvenir :

• Html2canvas, qui génère des captures d'écran basées sur DOM
• jsPdf, une bibliothèque qui génère PDF

Commencer à coder :

npm install html2canvas jspdf

import 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.addImage(imgData, 'JPEG', 0, 0, width, height)
        pdf.save('your-filename.pdf')
})

C'est tout !

Veuillez noter la méthode html2canvas de onclone. C'est très pratique lorsque vous devez manipuler le DOM avant de prendre une capture d'écran (par exemple en masquant le bouton d'impression). J'ai vu de nombreux projets utilisant ce package. Mais malheureusement, ce n’est pas ce que nous voulons car nous devons créer le PDF sur le backend.

Option 2 : Utilisez simplement la bibliothèque PDF

Il existe plusieurs bibliothèques disponibles sur NPM, comme jsPDF (mentionné ci-dessus) ou PDFKit. Le problème avec eux est que si je veux utiliser ces bibliothèques, je devrai restructurer la page. Cela nuit définitivement à la maintenabilité car je devrais appliquer toutes les modifications ultérieures au modèle PDF et à la page React.

Veuillez consulter le code ci-dessous. Vous devez créer manuellement le document PDF vous-même. Vous devez parcourir le DOM, trouver chaque élément et le convertir au format PDF, ce qui est un travail fastidieux. Il faut trouver un moyen plus simple.

doc = new PDFDocument
doc.pipe fs.createWriteStream('output.pdf')
doc.font('fonts/PalatinoBold.ttf')
   .fontSize(25)
   .text('Some text with an embedded font!', 100, 100)
 
doc.image('path/to/image.png', {
   fit: [250, 300],
   align: 'center',
   valign: 'center'
});
 
doc.addPage()
   .fontSize(25)
   .text('Here is some vector graphics...', 100, 100)
 
doc.end()

Cet extrait de code provient de la documentation PDFKit. Mais cela peut toujours être utile si votre objectif est de générer un fichier PDF directement, plutôt que de convertir une page HTML existante (et en constante évolution).

Solution finale 3 : Puppeteer et Headless Chrome basés sur Node.js

Qu'est-ce que Puppeteer ? Sa documentation se lit comme suit :

Puppeteer est une bibliothèque Node qui fournit une API de haut niveau pour contrôler Chrome ou Chromium sur le protocole DevTools. Puppeteer exécute Chrome ou Chromium en mode sans tête par défaut, mais il peut également être configuré pour fonctionner en mode complet (sans tête).

Il s'agit essentiellement d'un navigateur qui peut être exécuté à partir de Node.js. Si vous lisez sa documentation, la première chose mentionnée est que vous pouvez utiliser Puppeteer pour générer des captures d'écran et des PDF de pages. excellent! C'est exactement ce que nous voulons.

Utilisez d'abord npmi i puppeteer pour installer Puppeteer et implémenter nos fonctions.

const puppeteer = require('puppeteer')
 
async function printPDF() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://blog.risingstack.com', {waitUntil: 'networkidle0'});
  const pdf = await page.pdf({ format: 'A4' });
 
  await browser.close();
  return pdf
})

Il s'agit d'une fonction simple qui accède à une URL et génère un fichier PDF du site.

Tout d'abord, nous lançons le navigateur (la génération de PDF n'est prise en charge qu'en mode sans tête), puis ouvrons une nouvelle page, définissons la fenêtre d'affichage et naviguons jusqu'à l'URL fournie.

设置 waitUntil:'networkidle0' 选项意味着当至少500毫秒没有网络连接时，Puppeteer 会认为导航已完成。 （可以从 API docs 获取更多信息。）

之后，我们将 PDF 保存为变量，关闭浏览器并返回 PDF。

注意：page.pdf 方法接收 options 对象，你可以使用 'path' 选项将文件保存到磁盘。如果未提供路径，则 PDF 将不会被保存到磁盘，而是会得到缓冲区。（稍后我将讨论如何处理它。）

如果需要先登录才能从受保护的页面生成 PDF，首先你要导航到登录页面，检查表单元素的 ID 或名称，填写它们，然后提交表单：

await page.type('#email', process.env.PDF_USER)
await page.type('#password', process.env.PDF_PASSWORD)
await page.click('#submit')

要始终将登录凭据保存在环境变量中，不要硬编码！

样式控制

Puppeteer 也有这种样式操作的解决方案。你可以在生成 PDF 之前插入样式标记，Puppeteer 将生成具有已修改样式的文件。

await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })

将文件发送到客户端并保存

好的，现在你已经在后端生成了一个 PDF 文件。接下来做什么？

如上所述，如果你不把文件保存到磁盘，将会得到一个缓冲区。你只需要把含有适当内容类型的缓冲区发送到前端即可。

printPDF.then(pdf => {
    res.set({ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length })
    res.send(pdf)

现在，你只需在浏览器向服务器发送请求即可得到生成的 PDF。

function getPDF() {
 return axios.get(`${API_URL}/your-pdf-endpoint`, {
   responseType: 'arraybuffer',
   headers: {
     'Accept': 'application/pdf'
   }
 })

一旦发送了请求，缓冲区的内容就应该开始下载了。最后一步是将缓冲区数据转换为 PDF 文件。

savePDF = () => {
    this.openModal(‘Loading…’) // open modal
   return getPDF() // API call
     .then((response) => {
       const blob = new Blob([response.data], {type: 'application/pdf'})
       const link = document.createElement('a')
       link.href = window.URL.createObjectURL(blob)
       link.download = `your-file-name.pdf`
       link.click()
       this.closeModal() // close modal
     })
   .catch(err => /** error handling **/)
 }
<button onClick={this.savePDF}>Save as PDF</button>

就这样！如果单击“保存”按钮，那么浏览器将会保存 PDF。

在 Docker 中使用 Puppeteer

我认为这是实施中最棘手的部分 —— 所以让我帮你节省几个小时的百度时间。

官方文档指出“在 Docker 中使用 headless Chrome 并使其运行起来可能会非常棘手”。官方文档有疑难解答部分，你可以找到有关用 Docker 安装 puppeteer 的所有必要信息。

如果你在 Alpine 镜像上安装 Puppeteer，请确保在看到页面的这一部分时再向下滚动一点。否则你可能会忽略一个事实：你无法运行最新的 Puppeteer 版本，并且你还需要用一个标记禁用 shm ：

const browser = await puppeteer.launch({
  headless: true,
  args: ['--disable-dev-shm-usage']
});

否则，Puppeteer 子进程可能会在正常启动之前耗尽内存。

方案 3 + 1：CSS 打印规则

可能有人认为从开发人员的角度来看，简单地使用 CSS 打印规则很容易。没有 NPM 模块，只有纯 CSS。但是在跨浏览器兼容性方面，它的表现如何呢？

在选择 CSS 打印规则时，你必须在每个浏览器中测试结果，以确保它提供的布局是相同的，并且它不是100％能做到这一点。

例如，在给定元素后面插入一个 break-after 并不是一个多么高深的技术，但是你可能会惊讶的发现要在 Firefox 中使用它需要使用变通方法。

除非你是一位经验丰富的 CSS 大师，在创建可打印页面方面有很多的经验，否则这可能会非常耗时。

如果你可以使打印样式表保持简单，打印规则是很好用的。

让我们来看一个例子吧。

@media print {
    .print-button {
        display: none;
    }
    
    .content div {
        break-after: always;
    }
}

上面的 CSS 隐藏了打印按钮，并在每个 div 之后插入一个分页符，其中包含content 类。有一篇很棒的文章总结了你可以用打印规则做什么，以及它们有什么问题，包括浏览器兼容性。

考虑到所有因素，如果你想从不那么复杂的页面生成 PDF，CSS打印规则非常有效。

总结

让我们快速回顾前面介绍的方案，以便从 HTML 页面生成 PDF 文件：

• Générer des captures d'écran à partir du DOM : peut être utile lorsque vous devez créer un instantané à partir d'une page (par exemple, créer une vignette), mais peut s'avérer fastidieux lorsque vous devez traiter de grandes quantités de données.
• Bibliothèque PDF uniquement : Si vous envisagez de créer des fichiers PDF par programme à partir de zéro, c'est la solution parfaite. Sinon, vous devez conserver les modèles HTML et PDF, ce qui est catégoriquement interdit.
• Puppeteer : Bien que travailler sur Docker soit relativement difficile, il a fourni les meilleurs résultats pour notre implémentation et a été le plus simple à coder.
• Règles d'impression CSS : Si vos utilisateurs sont suffisamment instruits pour savoir comment imprimer le contenu d'une page dans un fichier et que votre page est relativement simple, alors c'est probablement la solution la plus simple. Comme vous pouvez le constater dans notre cas, ce n’est pas le cas.

Bonne impression !

Adresse originale en anglais : https://blog.risingstack.com/pdf-from-html-node-js-puppeteer/

Plus de connaissances liées à la programmation, s'il vous plaît visitez : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!