阅读 105

web打印动态分页、预览。内容满了,自动换页、移动端兼容 生成PDF bookjs-eazy

WEB打印,HTML转PDF工具。bookjs-eazy
  • 仓库地址: |
  • 主要解决,HTML生成PDF,分页可控的问题
  • 优势:
  1. 只需专注用H5构件你的PDF内容,而无需关心分页及内容截断问题
  2. 支持预览、WEB打印、页码/目录、自定义页眉页脚。
  3. 前后端皆可生成PDF,前端打印另存为PDF,后端可配套使用chrome headless和wkhtmltopdf命令行PDF生成工具。
  4. docker镜像。可快速构件你的在线PDF的打印生成服务
  5. 兼容主流浏览器及移动端

预览案例(./dist)

使用方式:

渲染机制:
程序会检查全局变量window.bookConfig.start 的值。
直到此值为true时,才开始渲染将 #content-box 节点的内容渲染为PDF样式。
重要:如果你的页面是动态的,就先将默认值设为false,当内容准备好后,在将其设为true,

配置页面参数:

  • 定义一个全局配置变量 bookConfig

PDF内容设计

  • 定义一个id为content-box节点内放入要插入到文档里的内容;
  • content-box下的每个节点都需定义属性 data-op-type,表示其在文档中的插入方式 其值含义如下:
block : 块:(默认)如果当前页空间充足则整体插入,空间不足,则会整体插入到下一页
    注意:这里的块,仅是内容不跨页。与css中的display无关,也就可以display: inline样式。
    前面有用户问到这个问题。从而限制了他对PDF内容设计的思维。

block-box : 块盒子:块盒子内部nop-fill-box标记的节点包含的多个块,盒子内的多个块被分割到多个页面时,都会复制包裹块的外部节点。
    以下一个示例中的表格为例:
    table节点定义为块盒子
    tbody节点定义为容纳块的容器节点(使用class: nop-fill-box标记)
    这样在填充行tr时,当前页空间不足时,换页并复制外部table(除去nop-fill-box标记的部分)继续填充。这样表头就得到复用

text : 文本,跨页内容自动分割,节点内直接放入文本内容。
text-box : 文本盒子:与块盒子类似,大文本内容跨多个页面时,会复制外部包裹文本的盒子的部分。
     文本盒子节点, 大文本的容器节点需用 class : nop-fill-box标记

mix-box : 混合盒子:与块盒子类似超出页面自动分页,(容器使用class: nop-fill-box标记),并复制容器外层,盒子内部放置的所有节点必须标记data-op-type属性,属性值: text或block 
     text:允许跨页截断
     block:(默认)不可跨页截断

new-page : 标记从新页,开始插入

pendants : 页面部件列表(页眉/页脚/页标签/水印背景等,相对页面纸张固定的元素),在其定义后的每个页面都会显示,直到下一个pendants出现。
  • 使用样例
  • 动手来试试: # 自己docker打印服务的命令 # ./docker-start.sh [WEB_PORT=3000] [WEB_PATH=dist] # 运行打印服务 # 会以dist为根目录,创建一个web站点。 # 生成的pdf会存在./pdf/ 目录下。你的bookjs-eazy编写的页面也可以直接放在根目录下。 # 在根目录下用bookjs-eazy创建book.html的文件。 # bookConfig.toolBar.serverPrint 可以配置为 :true 或 {serverUrl : ‘//your_host_name[:WEB_PORT]/‘} # http://your_host_name[:WEB_PORT]/book.html访问即可预览/打印下载

    详细内容见,wuxue107/screenshot-api-server项目

    使用官网打印服务

    前提是。您用bookjs-eazy创建的页面可外网访问。
    如果使用官网打印服务,页面需要不授权访问,或者 使用短期授权码机制(建议),携带在url上。只有在有授权码在一定时间段内才有访问您用

        参考bookConfig.toolBar.serverPrint选项,工具栏会多出下载按钮
        配置值: { serverUrl: ‘//bookjs.zhouwuxue.com/‘ }

    命令行打印,使用chrome headless方式渲染

        # 首次使用时,安装bin/html2pdf的依赖包
        yarn install
        # 安装过后,执行命令
        # 示例:
        bin/html2pdf print --output eazy-2-1.pdf "https://bookjs.zhouwuxue.com/eazy-2.html"
    
        #
        # 命令行说明:
        #   Usage: html2pdf print [options] 
        #   
        #   Options:
        #     -o --output [outputfile]     保存PDF文件的路径 (default: "output.pdf")
        #     -t --timeout [type]          超时时间 (default: 60000)
        #     -a --agent [agent]           指定转换引擎chrome-headless|puppeteer,默认:puppeteer (default: "puppeteer")
        #     -d --printDelay [delay]      打印前等待延迟(毫秒) (default: 1000)
        #     -c --checkJs [jsExpression]  检查是否渲染完成的js表达式 (default: "window.status === ‘PDFComplete‘")
        #                                  "window.document.readyState === ‘complete‘" 这个表达式可以用作非bookjs-eazy构建的网页
        #     -h, --help                   display help for command
        #
        #

    命令行打印,使用wkhtmltopdf渲染(会更据h1-h6生成PDF书签),需自己去下载命令行,放入PATH的环境变量所在目录下

    
        bin/pdf-a4-landscape "https://bookjs.zhouwuxue.com/eazy-2.html" eazy-2-2.pdf
        #
        # 在bin目录下,有数个同类脚本文件。
        # 
        # bin/pdf-[纸张]-[纸张方向]  [预览的链接] [输出文件]
        #
        # 注意:如果使用wkhtmltopdf方式的自定义尺寸,不用担心,浏览器渲染完毕后,在Console上会输出wkhtmltopdf的PDF配套生成命令

    生成常见问题

    • 生成的PDF里全是框框,原因在于。在linux服务器环境下,通常没有安装所需字体。
    • 执行bin/pdf-xx-xx 相关命令,找不到wkhtmltopdf,需自己去下载wkhtmltopdf放置PATH目录下
    • bin/html2pdf --agent=chrome-headless参数启动时,报错。该agent使用的是本地已存在的chrome headless remote-debug服务
    :: 启动一个本地chrome headless
    "chrome.exe" --headless --disable-gpu --remote-debugging-port=9222 --disable-extensions --mute-audio
    :: 然后再使用 --agent=chrome-headless 则会成功。
    :: 默认的 --agent=puppeteer 则不需,以上操作,会启动自带的浏览器。

    原文:https://blog.51cto.com/u_15164170/2700152

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐