[高级]pdf生成(可水印)、pdf预览(可分页)、pdf打印：全栈一条龙方案

2024-01-07 12:30:22

前言

每个前端开发者的一生中总会遇到一些与pdf有关的需求，但是搜寻网上的文章，大多都是部分功能的实现，想要获得与自身需求相契合的完整方案并不是一件容易的事情，基于此，我结合自身的相关工作经验，梳理出了一套包含前端pdf生成、前端pdf预览、前端pdf打印的完整技术方案，大家觉得有用的话可以收藏此文以便日后工作中借鉴。

本文demo示例代码地址：https://github.com/Alansad/pdfArticle

pdf生成

一、方案比较

生成pdf一般来说有两种方案，第一种在客户端生成，第二种是在服务端生成，我推荐在服务端生成pdf。

在客户端一般是基于canvas来生成：

1.使用html2canvas这个库将html转为canvas对象
2.使用canvas.toDataURL方法将canvas转为图片
3.使用jsPDF这个库将图片转为pdf
虽然方案看起来比较简单，但是它有两个致命缺点：
1.生成的pdf模糊
2.客户端无法长期存储该pdf
所以我推荐使用第二种方案，在服务端生成pdf：

1.生成html字符串
2.无头浏览器将html打开
3.通过对页面的截图生成pdf
有部分服务端的插件将无头浏览器打开/截图的过程做成了黑盒，开发者感受不到这个过程。
但是无论是使用java还是nodejs、python等语言，一般都是采用以上方案，该方案生成的pdf清晰度高、还原度强。

二、具体实现

下面我介绍一个具体的案例，来详细介绍该方案的技术细节。

需求描述：提供一个生成pdf的接口，根据不同的请求参数来渲染出不同的pdf，并将pdf文件以url链接的形式返回。

分析：根据以上需求，我们首先需要制作一个html模版，然后根据请求中的参数来填充html，用无头浏览器将html转为pdf之后存储到文件服务上，最后将url返回给前端。

代码实现：

以下示例代码采用原生node语言，方便大家理解：

1、首先我们准备好html字符串模版:

// html模版，根据title变化标题
const getHtml = (params) => {
  const {
    title = ' ',
  } = params
  return (`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>demo</title>
</head>
<body>
<div class="wrapper">
  <h style="color:red">${title}</h>
  <div>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn1-q.mafengwo.net%2Fs6%2FM00%2FFC%2FCC%2FwKgB4lNzI2yAK4tdAAELj6RBVtE37.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fn1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627634331&t=0efacd9a64806ffc74c5cdfa8f7f261f" alt="">
    <img src="https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn1-q.mafengwo.net%2Fs6%2FM00%2FFC%2FCC%2FwKgB4lNzI2yAK4tdAAELj6RBVtE37.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fn1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627634331&t=0efacd9a64806ffc74c5cdfa8f7f261f" alt="">
    <img src="https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn1-q.mafengwo.net%2Fs6%2FM00%2FFC%2FCC%2FwKgB4lNzI2yAK4tdAAELj6RBVtE37.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fn1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627634331&t=0efacd9a64806ffc74c5cdfa8f7f261f" alt="">
    <img src="https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn1-q.mafengwo.net%2Fs6%2FM00%2FFC%2FCC%2FwKgB4lNzI2yAK4tdAAELj6RBVtE37.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fn1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627634331&t=0efacd9a64806ffc74c5cdfa8f7f261f" alt="">
    <img src="https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn1-q.mafengwo.net%2Fs6%2FM00%2FFC%2FCC%2FwKgB4lNzI2yAK4tdAAELj6RBVtE37.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fn1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627634331&t=0efacd9a64806ffc74c5cdfa8f7f261f" alt="">
    <img src="https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn1-q.mafengwo.net%2Fs6%2FM00%2FFC%2FCC%2FwKgB4lNzI2yAK4tdAAELj6RBVtE37.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fn1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627634331&t=0efacd9a64806ffc74c5cdfa8f7f261f" alt="">
    <img src="https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg" alt="">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn1-q.mafengwo.net%2Fs6%2FM00%2FFC%2FCC%2FwKgB4lNzI2yAK4tdAAELj6RBVtE37.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fn1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627634331&t=0efacd9a64806ffc74c5cdfa8f7f261f" alt="">
    <img src="https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg" alt="">
  </div>
</div>
</html>
  `)
}

2、然后我们使用html-pdf这个npm包来将html转换为pdf（html-pdf文档）

https://www.npmjs.com/package/html-pdf

const pdf = require('html-pdf')

// 生成pdf的参数
const optionDefault = {
 'format': 'A4',
 'header': {
   'height': '10mm',
   'contents': '',
 }
}

// 将html转为pdf
const exportPdf = (html, options = optionDefault) => {
 return new Promise((resolve, reject) => {
   pdf.create(html, options).toBuffer((err, res) => {
     if (err) {
       reject(err)
     } else {
       resolve(res)
     }
   })
 })
}

3、最后我们启动一个http服务，写一个接口来返回pdf：

const http = require('http')
const url = require('url')
const querystring = require("querystring")
const {getHtml, exportPdf} = require('./utils/htmlToPdf')
http.createServer(async (request, response) => {
  const {query, pathname} = url.parse(request.url)
  const {title} = querystring.parse(query)
  if (pathname === '/') {
    response.writeHead(200, {
      'Content-Type': 'application/pdf',
      'Access-Control-Allow-Origin': '*'
    })
    const html = getHtml({title})
    const pdf = await exportPdf(html)
    response.end(pdf)
  }
}).listen(8888)

4、此处我们的示例为直接返回buffer格式的pdf，如果需要上传到存储服务（以阿里云存储服务为例），我们可以使用pdf.create(html, options).toStream获取Stream格式的pdf文件，然后用post请求上传。

pdf.create(html, options).toStream((err, res) => {
      if (err) {
        reject(err)
      } else {
        resolve(res)
      }
    })

理解了方案原理后，给pdf添加水印也变得很简单了：

因为该方案的原理是对html页面进行截屏，那么我们只需要给html页面添加水印就可以了，网上的水印库很多，在html中添加一段script来加入水印就可以啦。

除了以上功能实现，还有两个注意事项：

因为该方案基于无头浏览器实现，所以生成pdf的速度直接取决于浏览器加载html的速度，如果时间过长建议做成异步获取pdf。另外如果存在高并发的情况，加载html的数量过多，还需要注意服务的内存问题，最好与业务代码区分开部署到不同的服务器。
浏览器加载html的中文时依赖中文字体库，如果存在pdf中不显示中文的情况，需要在系统中安装中文字体；如果不想给系统安装中文字体，也可以自己指定中文字体：

@font-face {
          font-family: pdfZh;
          src: url("http://localhost:3000/pdf_zh.ttf");
        }
        body{
           font-family: pdfZh;
        }

pdf预览

pdf预览的原理一般是将pdf转为canvas，而目前最流行的库为pdf.js，我以官方的一个例子介绍下该库，最终效果如下，可以分页对pdf进行预览。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--<script src="./pdf.js"></script>-->
  <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
  <style>
    #the-canvas {
      border: 1px solid black;
      direction: ltr;
    }
  </style>
</head>
<body>
<div>
  <button id="prev">上一页</button>
  <button id="next">下一页</button>
  &nbsp; &nbsp;
  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<canvas id="the-canvas" style="width: 100%; height: auto"></canvas>
</body>
<script>
  // If absolute URL from the remote server is provided, configure the CORS
  // header on that server.
  // const url = 'http://localhost:8888/?title=123'
  var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';

  // Loaded via <script> tag, create shortcut to access PDF.js exports.
  const pdfjsLib = window['pdfjs-dist/build/pdf'];

  // The workerSrc property shall be specified.
  pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

  var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 3,
    canvas = document.getElementById('the-canvas'),
    ctx = canvas.getContext('2d');
  /**
   * Get page info from document, resize canvas accordingly, and render page.
   * @param num Page number.
   */
  function renderPage(num) {
    pageRendering = true;
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function(page) {
      var viewport = page.getViewport({scale: scale});
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // Render PDF page into canvas context
      var renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);

      // Wait for rendering to finish
      renderTask.promise.then(function() {
        pageRendering = false;
        if (pageNumPending !== null) {
          // New page rendering is pending
          renderPage(pageNumPending);
          pageNumPending = null;
        }
      });
    });

    // Update page counters
    document.getElementById('page_num').textContent = num;
  }
  /**
   * If another page rendering in progress, waits until the rendering is
   * finised. Otherwise, executes rendering immediately.
   */
  function queueRenderPage(num) {
    if (pageRendering) {
      pageNumPending = num;
    } else {
      renderPage(num);
    }
  }

  /**
   * Displays previous page.
   */
  function onPrevPage() {
    if (pageNum <= 1) {
      return;
    }
    pageNum--;
    queueRenderPage(pageNum);
  }
  document.getElementById('prev').addEventListener('click', onPrevPage);

  /**
   * Displays next page.
   */
  function onNextPage() {
    if (pageNum >= pdfDoc.numPages) {
      return;
    }
    pageNum++;
    queueRenderPage(pageNum);
  }
  document.getElementById('next').addEventListener('click', onNextPage);

  /**
   * Asynchronously downloads PDF.
   */
  pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    document.getElementById('page_count').textContent = pdfDoc.numPages;

    // Initial/first page rendering
    renderPage(pageNum);
  });
</script>
</html>

pdf.js文档为：https://github.com/mozilla/pdf.js ，需要注意的是这个scale数值，理论上设置的越大展示的越清晰，但是设置的过大有可能会导致解析的过程卡死。

打印

在浏览器端，我们是没有权限直接连上打印机来打印文件的，因为这样存在很大的安全隐患。比较常见的需求是唤起浏览器的打印界面，让用户自行调整和操作打印。

以上动图所示的效果为：自动唤起打印pdf功能。

此处将pdf变为objectURL的目的是统一解决跨域问题。

具体代码为：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<iframe id="frame-result" style="height: 100vh;width: 100vw;"></iframe>
</body>
<script>
  downloadRes = async () => {
    let response = await fetch('http://localhost:8888/?title=123')
    // 内容转变成blob地址
    let blob = await response.blob()
    const iframeEle =  document.querySelector('#frame-result')
    iframeEle.src = URL.createObjectURL(new Blob([blob], {type: 'application/pdf'}))
    if (iframeEle) {
      iframeEle.onload = () => {
        iframeEle.contentWindow.print();
      }
    }
  }
  downloadRes()
</script>
</html>

如果需要在不展示pdf的情况下唤起打印窗口，将iframe隐藏即可

<iframe id="frame-result" style="display: none"></iframe>

如果需要新增打开一个窗口来打印，则可以使用以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
</body>
<script>
  downloadRes = async () => {
    let response = await fetch('http://localhost:8888/?title=123')
    // 内容转变成blob地址
    let blob = await response.blob()
    const newWindow = window.open(URL.createObjectURL(new Blob([blob], {type: 'application/pdf'})))
    if (newWindow) {
      newWindow.onload = () => {
        newWindow.print();
      }
    }
  }
  downloadRes()
</script>
</html>

总结

本文介绍了包含pdf生成、pdf预览、pdf打印的完整方案，欢迎各位小伙伴交流和指正。另外对于文件流以及无头浏览器相关知识感兴趣的同学也可以关注我，后面我会详细介绍其在工作中相关的实际应用。

码农公寓

前言

一、方案比较

二、具体实现

相关文章