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

前言

每个前端开发者的一生中总会遇到一些与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：

image.png

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

二、具体实现

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

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

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

代码实现：

image.png

以下示例代码采用原生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文档）

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预览

image.png

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

预览pdf.gif

完整代码如下：

<!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.gif

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

实现步骤如下：

image.png

此处将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>

隐藏iframe.gif

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

<!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打印的完整方案，欢迎各位小伙伴交流和指正。另外对于文件流以及无头浏览器相关知识感兴趣的同学也可以关注我，后面我会详细介绍其在工作中相关的实际应用。

最后编辑于：2021.07.02 11:59:16

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,080评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,422评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,630评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,554评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,662评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,856评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,014评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,752评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,212评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,541评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,687评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,347评论 4赞 331
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,973评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,777评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,006评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,406评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,576评论 2赞 349

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

前言

pdf生成

一、方案比较

二、具体实现

pdf预览

打印

总结

推荐阅读更多精彩内容