V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
vremouth
V2EX  ›  JavaScript

js 如何实现 html 转换成 pdf 呢

  •  
  •   vremouth · 2017-03-23 12:28:36 +08:00 · 5757 次点击
    这是一个创建于 2648 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用了 jsPDF 的 addHTML 页面表格短的时候可以使用 页面长的时候就卡死了

    26 条回复    2017-04-01 10:20:49 +08:00
    halfcrazy
        1
    halfcrazy  
       2017-03-23 12:49:46 +08:00
    phantomjs 试试
    dikT
        2
    dikT  
       2017-03-23 13:02:21 +08:00
    @halfcrazy 头像已盗
    yamadie
        3
    yamadie  
       2017-03-23 13:19:14 +08:00   ❤️ 1
    ``` js
    window.print();
    ```
    vremouth
        4
    vremouth  
    OP
       2017-03-23 13:45:25 +08:00
    @halfcrazy 但是页面里的数据是 ajax 生成的,还有 echart 生成的图表
    dong3580
        5
    dong3580  
       2017-03-23 14:09:36 +08:00
    @vremouth
    这种情况我做过,需要专门做个页面匹配 A4 纸,比如说做好的这个页面叫 B ,打印的时候生成 B ,调出 window.print ,
    jsPDF ?你是在开玩笑么,
    jprovim
        6
    jprovim  
       2017-03-23 14:45:57 +08:00
    @dong3580 正解.
    871588950
        7
    871588950  
       2017-03-23 14:49:48 +08:00
    wkhtmltopdf 需要后端配合
    linshuizhaoying
        8
    linshuizhaoying  
       2017-03-23 15:01:37 +08:00 via iPhone
    canvas 截图然后转
    fensh
        9
    fensh  
       2017-03-23 15:11:49 +08:00
    不会 js 的前来捣乱
    ykwlv
        10
    ykwlv  
       2017-03-23 16:38:14 +08:00
    @dong3580 这个怎么批量做?
    dong3580
        11
    dong3580  
       2017-03-23 16:49:20 +08:00
    @871588950
    目前为止,最简单的解决办法就是用 wkhtmltopdf ,然而这货线程安全性存在问题,并且对网站也会有安全隐患。

    @ykwlv
    老老实实做 A4 纸打印适配的页面即可,然后调用 window.print ,没有捷径,这个方法能够尽量保证在 IE, Edge , Chrome , Firefox 打印效果的一致性。
    shyling
        12
    shyling  
       2017-03-23 17:40:19 +08:00
    nightmare 大法好
    vremouth
        13
    vremouth  
    OP
       2017-03-23 17:48:34 +08:00
    @dong3580 您好请问做 a4 纸适配页面有什么思路吗
    MrMario
        14
    MrMario  
       2017-03-23 17:48:37 +08:00 via iPhone
    @dong3580 请问能否详细谈谈 wkhtmltopdf 的安全问题?
    dong3580
        15
    dong3580  
       2017-03-23 17:59:22 +08:00
    @vremouth
    简单点的 A4 ,比如 A 页面,各种渲染,你试试 做个页面 B ,内容和 A 页面一致,但保持固定 800px 宽度的 div ,页面生成后执行 window.print 即可。
    这只是个参考,你可以自己试试生成效果,如果你是前后端分离,前端代码基本上代码可以重用 A 的,后端依然是原始接口,还是满方便的。

    注意,各个浏览器可能存在打印的颜色差距大的问题,这个要慢慢调了。
    vremouth
        16
    vremouth  
    OP
       2017-03-23 18:02:23 +08:00
    @dong3580 多谢 我在 a 页面点击弹出 800px 的 b 页面 然后调用 window.print 就可以了吧
    ykwlv
        17
    ykwlv  
       2017-03-23 18:23:53 +08:00
    @dong3580 我之前也有批量 html 转 pdf 需求,用 wkhtmltopdf 做的,我不太明白 window.print 怎么实现?用了以后,会弹出来 chrome 打印预览的页面,不会直接生成 PDF 啊,还需要自己再手动保存成 pdf
    wdk23411
        18
    wdk23411  
       2017-03-24 09:58:33 +08:00
    @ykwlv 后台干吧,不能啥事都指望前端 js 来做
    871588950
        19
    871588950  
       2017-03-24 10:23:51 +08:00
    @dong3580 wkhtmltopdf 的安全问题能否详细谈谈
    vremouth
        20
    vremouth  
    OP
       2017-03-29 18:30:38 +08:00
    @dong3580 您好,我想请教下 我 width 设置成了 210mm
    宽度能够整体打印了
    但是长度上 最后一部分会打印不上怎么办
    dong3580
        21
    dong3580  
       2017-03-29 18:39:56 +08:00 via Android
    @vremouth
    调用的是自带的 window.print 么?我记得自带的会自动换页的吧,
    vremouth
        22
    vremouth  
    OP
       2017-03-30 09:50:24 +08:00
    @vremouth 是自动换页。。。但是比如页面是 4 页零 2 行的内容 打印出来就少了那 2 行。。
    vremouth
        23
    vremouth  
    OP
       2017-03-30 12:17:52 +08:00
    @dong3580 确切的说是少最后一页,不够一页内容的最后一页
    vremouth
        24
    vremouth  
    OP
       2017-03-30 12:55:00 +08:00
    @dong3580 换了个浏览器用 edge 没有问题
    看来是 chrome 的问题
    dong3580
        25
    dong3580  
       2017-03-30 13:14:11 +08:00
    @vremouth
    表格布局么?可能是表格高度没设置吧?你尝试打印静态的页面,设置好表格每行高度试试,
    vremouth
        26
    vremouth  
    OP
       2017-04-01 10:20:49 +08:00
    @dong3580 chrome 不够一页的时候会被吞掉 我加了一页空白的 div 在最下边解决了这个问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2500 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 109ms · UTC 13:12 · PVG 21:12 · LAX 06:12 · JFK 09:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.