js 如何实现 html 转换成 pdf 呢

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3325 days ago, the information mentioned may be changed or developed.

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

addhtml

jspdf

页面

HTML

26 replies • 2017-04-01 10:20:49 +08:00

halfcrazy

Mar 23, 2017

phantomjs 试试

dikT

Mar 23, 2017

@halfcrazy 头像已盗

yamadie

Mar 23, 2017

``` js
window.print();
```

vremouth

Mar 23, 2017

@halfcrazy 但是页面里的数据是 ajax 生成的，还有 echart 生成的图表

dong3580

Mar 23, 2017

@vremouth
这种情况我做过，需要专门做个页面匹配 A4 纸，比如说做好的这个页面叫 B ，打印的时候生成 B ，调出 window.print ，
jsPDF ？你是在开玩笑么，

jprovim

Mar 23, 2017

@dong3580 正解.

871588950

Mar 23, 2017

wkhtmltopdf 需要后端配合

linshuizhaoying

Mar 23, 2017 via iPhone

canvas 截图然后转

fensh

Mar 23, 2017

不会 js 的前来捣乱

ykwlv

Mar 23, 2017

@dong3580 这个怎么批量做？

dong3580

Mar 23, 2017

@871588950
目前为止，最简单的解决办法就是用 wkhtmltopdf ，然而这货线程安全性存在问题，并且对网站也会有安全隐患。

@ykwlv
老老实实做 A4 纸打印适配的页面即可，然后调用 window.print ，没有捷径，这个方法能够尽量保证在 IE, Edge ， Chrome ， Firefox 打印效果的一致性。

shyling

Mar 23, 2017

nightmare 大法好

vremouth

Mar 23, 2017

@dong3580 您好请问做 a4 纸适配页面有什么思路吗

MrMario

Mar 23, 2017 via iPhone

@dong3580 请问能否详细谈谈 wkhtmltopdf 的安全问题？

dong3580

Mar 23, 2017

@vremouth
简单点的 A4 ，比如 A 页面，各种渲染，你试试做个页面 B ，内容和 A 页面一致，但保持固定 800px 宽度的 div ，页面生成后执行 window.print 即可。
这只是个参考，你可以自己试试生成效果，如果你是前后端分离，前端代码基本上代码可以重用 A 的，后端依然是原始接口，还是满方便的。

注意，各个浏览器可能存在打印的颜色差距大的问题，这个要慢慢调了。

vremouth

Mar 23, 2017

@dong3580 多谢我在 a 页面点击弹出 800px 的 b 页面然后调用 window.print 就可以了吧

ykwlv

Mar 23, 2017

@dong3580 我之前也有批量 html 转 pdf 需求，用 wkhtmltopdf 做的，我不太明白 window.print 怎么实现？用了以后，会弹出来 chrome 打印预览的页面，不会直接生成 PDF 啊，还需要自己再手动保存成 pdf

wdk23411

Mar 24, 2017

@ykwlv 后台干吧，不能啥事都指望前端 js 来做

871588950

Mar 24, 2017

@dong3580 wkhtmltopdf 的安全问题能否详细谈谈

vremouth

Mar 29, 2017

@dong3580 您好，我想请教下我 width 设置成了 210mm
宽度能够整体打印了
但是长度上最后一部分会打印不上怎么办

dong3580

Mar 29, 2017 via Android

@vremouth
调用的是自带的 window.print 么？我记得自带的会自动换页的吧，

vremouth

Mar 30, 2017

@vremouth 是自动换页。。。但是比如页面是 4 页零 2 行的内容打印出来就少了那 2 行。。

vremouth

Mar 30, 2017

@dong3580 确切的说是少最后一页，不够一页内容的最后一页

vremouth

Mar 30, 2017

@dong3580 换了个浏览器用 edge 没有问题
看来是 chrome 的问题

dong3580

Mar 30, 2017

@vremouth
表格布局么？可能是表格高度没设置吧？你尝试打印静态的页面，设置好表格每行高度试试，

vremouth

Apr 1, 2017

@dong3580 chrome 不够一页的时候会被吞掉我加了一页空白的 div 在最下边解决了这个问题