如何利用js或php将html网页转为pdf？ - 知乎33被浏览<strong class="NumberBoard-itemValue" title="分享邀请回答2添加评论分享收藏感谢收起16 条评论分享收藏感谢收起写回答&meta charset="UTF-8"&
&script type="text/javascript" src="http://xdoc.aliapp.com/xdoc.js"&&/script&
&body style="height:100%; margin:0; overflow:"&
&script id="myxdoc" type="text/xdoc" _format="pdf" style="width:100%;height:100%;"&
&xdoc version="A.3.0"&
&paper margin="0" width="300" height="380"/&
&body padding="16" fillImg="#@f40"&
&para align="center"&
&img width="116" height="116" fillColor="" drawType="adjust" src="http://img.ddky.com/c/product/_mid/z_1.jpg"/&
&para align="center"&
&text fontName="标宋" fontSize="18"&[汤臣倍健]维生素C咀嚼片&/text&
&para align="center"&
&text fontColor="#ff0000" fontName="标宋" format="c" fontSize="18"&88&/text&
&para align="center"&
&barcode type="QRCode" width="148" height="148" margin="8" value="http://h.ddky.com/shangpinxiangqing.html?shopId=100012&id=282740&skuId="/&
&script type="text/javascript" src="http://xdoc.aliapp.com/xdoc.js"&&/script&
&script id="myxdoc" type="text/xdoc" _format="pdf" style="width:100%;height:100%;"&
script中的内容是xdoc，说明见：
_format属性指定输出格式，还可以是flash、docx等，script中的属性可以使用xdoc可用的参数，style属性定义展示结果的样式。
这种方式将XDOC标记与HTML完美结合，输出pdf等文档与输出html完全相同。可以用jsp、php、asp、freemarker等动态输出文档。
浏览: 213145 次
来自: 北京
求您写的XDocBuilder的各种jar包，之前的连接我都打 ...
推荐用StratoIO打印控件，支持网页、URL、图片、PD、 ...
不过，官网的文档还可以，有例子
举个简单的例子，http://xdoc.iteye.com/b ...
这个是个好东西，只是在使用过程中，文档太少了，主要是xdoc ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'js 如何实现 html 转换成 pdf 呢 - V2EX
js 如何实现 html 转换成 pdf 呢
12:28:36 +08:00 &vremouth
用了 jsPDF 的 addHTML
页面表格短的时候可以使用
页面长的时候就卡死了
2953 次点击所在节点 &
halfcrazy 12:49:46 +08:00phantomjs 试试
dikT 13:02:21 +08:00@ 头像已盗
yamadie 13:19:14 +08:00``` js
window.print();
```
vremouth 13:45:25 +08:00@ 但是页面里的数据是 ajax 生成的，还有 echart 生成的图表
dong3580 14:09:36 +08:00@
这种情况我做过，需要专门做个页面匹配 A4 纸，比如说做好的这个页面叫 B ，打印的时候生成 B ，调出 window.print ，
jsPDF ？你是在开玩笑么，
jprovim 14:45:57 +08:00@ 正解.
14:49:48 +08:00wkhtmltopdf 需要后端配合
linshuizhaoying 15:01:37 +08:00canvas 截图然后转
fensh 15:11:49 +08:00不会 js 的前来捣乱
ykwlv 16:38:14 +08:00@ 这个怎么批量做？
dong3580 16:49:20 +08:00@
目前为止，最简单的解决办法就是用 wkhtmltopdf ，然而这货线程安全性存在问题，并且对网站也会有安全隐患。
老老实实做 A4 纸打印适配的页面即可，然后调用 window.print ，没有捷径，这个方法能够尽量保证在 IE, Edge ， Chrome ， Firefox 打印效果的一致性。
shyling 17:40:19 +08:00nightmare 大法好
vremouth 17:48:34 +08:00@
您好请问做 a4 纸适配页面有什么思路吗
MrMario 17:48:37 +08:00@ 请问能否详细谈谈 wkhtmltopdf 的安全问题？
dong3580 17:59:22 +08:00@
简单点的 A4 ，比如 A 页面，各种渲染，你试试 做个页面 B ，内容和 A 页面一致，但保持固定 800px 宽度的 div ，页面生成后执行 window.print 即可。
这只是个参考，你可以自己试试生成效果，如果你是前后端分离，前端代码基本上代码可以重用 A 的，后端依然是原始接口，还是满方便的。
注意，各个浏览器可能存在打印的颜色差距大的问题，这个要慢慢调了。
vremouth 18:02:23 +08:00@
多谢 我在 a 页面点击弹出 800px 的 b 页面 然后调用 window.print 就可以了吧
ykwlv 18:23:53 +08:00@ 我之前也有批量 html 转 pdf 需求，用 wkhtmltopdf 做的，我不太明白 window.print 怎么实现？用了以后，会弹出来 chrome 打印预览的页面，不会直接生成 PDF 啊，还需要自己再手动保存成 pdf
wdk23411 09:58:33 +08:00@ 后台干吧，不能啥事都指望前端 js 来做
10:23:51 +08:00@ wkhtmltopdf 的安全问题能否详细谈谈
vremouth 18:30:38 +08:00@
您好，我想请教下 我 width 设置成了 210mm
宽度能够整体打印了
但是长度上 最后一部分会打印不上怎么办
第 1 页 ／ 共 2 页
这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到
上打开本讨论主题的完整版本。
是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。
is a community of developers, designers and creative people.后使用快捷导航没有帐号？
暂时关闭广告
查看: 7499|回复: 0
JavaScript+Java实现HTML页面转为PDF文件保存的方法[javascript教程]
该用户从未签到主题帖子豆豆
需求是一个导出pdf的功能，多方奔走终于实现了，走了不少弯路，而且怀疑现在这个方法仍是弯的。
有个jsPDF 插件可以在前端直接生成pdf，很简便，但不支持IE。
首先引入& html2canvas.js
html2canvas(document.body, { //截图对象
//此处可配置详细参数
onrendered: function(canvas) { //渲染完成回调canvas
canvas.id = "mycanvas";
// 生成base64图片数据
var dataUrl = canvas.toDataURL('image/png');
//指定格式，也可不带参数
var formData = new FormData(); //模拟表单对象
formData.append("imgData",convertBase64UrlToBlob(dataUrl)); //写入数据
var xhr = new XMLHttpRequest(); //数据传输方法
xhr.open("POST", "../bulletin/exportPdf"); //配置传输方式及地址
xhr.send(formData);
xhr.onreadystatechange = function(){ //回调函数
if(xhr.readyState == 4){
if (xhr.status == 200) {
var back = JSON.parse(xhr.responseText);
if(back.success == true){
alertBox({content: 'Pdf导出成功！',lock: true,drag: false,ok: true});
alertBox({content: 'Pdf导出失败！',lock: true,drag: false,ok: true});
//将以base64的图片url数据转换为Blob
function convertBase64UrlToBlob(urlData){
//去掉url的头，并转换为byte
var bytes=window.atob(urlData.split(',')[1]);
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i & bytes. i++) {
ia[i] = bytes.charCodeAt(i);
return new Blob( [ab] , {type : 'image/png'});
兼容性：Firefox 3.5+, Chrome, Opera, IE10+
不支持：iframe，浏览器插件，Flash
跨域图片需要在跨域服务器header加上允许跨域请求
access-control-allow-origin: * access-control-allow-credentials: true
svg图片不能直接支持，已经有补丁包了，不过我没有试过。
IE9不支持FormData数据格式，也不支持Blob，这种情况下将canvas生成的64base字符串去掉url头之后直接传给后台，后台接收之后：
String base64 = Img.split(",")[1];
BASE64Decoder decode = new BASE64Decoder();
byte[] imgByte = decode.decodeBuffer(base64);
导入 itext jar包（官方下载地址：https://sourceforge.net/projects/itext/）
@RequestMapping("/exportPdf")
public @ResponseBody void exportPdf(MultipartHttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
ResultData result = new ResultData(); //自定义结果格式
String filePath = "c:\\exportPdf2.pdf";
String imagePath = "c:\\exportImg2.bmp";
Document document = new Document();
Map getMap = request.getFileMap();
MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //获取数据
InputStream file = mfile.getInputStream();
byte[] fileByte = FileCopyUtils.copyToByteArray(file);
FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//打开输入流
imageOutput.write(fileByte, 0, fileByte.length);//生成本地图片文件
imageOutput.close();
PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf文件
// document.setPageSize(PageSize.A2);
document.open();
document.add(new Paragraph("JUST TEST ..."));
Image image = Image.getInstance(imagePath); //itext-pdf-image
float heigth = image.getHeight();
float width = image.getWidth();
int percent = getPercent2(heigth, width);
//按比例缩小图片
image.setAlignment(Image.MIDDLE);
image.scalePercent(percent+3);
document.add(image);
document.close();
result.setSuccess(true);
operatelogService.addOperateLogInfo(request, "导出成功：成功导出简报Pdf");
}catch (DocumentException de) {
System.err.println(de.getMessage());
catch (Exception e) {
e.printStackTrace();
result.setSuccess(false);
result.setErrorMessage(e.toString());
operatelogService.addOperateLogError(request, "导出失败：服务器异常");
} catch (Exception e1) {
e1.printStackTrace();
response.getWriter().print(JSONObject.fromObject(result).toString());
private static int getPercent2(float h, float w) {
int p = 0;
float p2 = 0.0f;
p2 = 530 / w * 100;
p = Math.round(p2);
iText是著名的开放源码的站点sourceforge一个项目，是用于生成PDF文档的一个java类库。
处理速度快，支持很多PDF"高级"特性。
其它教程推荐：
上一篇：下一篇：
豆豆充值：
小白基地1、本站资源全部是百度网盘里的，不是360云盘、华为网盘，对百度云盘下载不了解请看帮助中心教程。
2、本站资源均来自网络，如侵犯您的合法权益，请发邮件至，本站将及时予以删除。
3、您在访问本站的过程中，如有任何意见、建议和疑问可直接联系本站客服反映，请勿轻信他人，谨防上当受骗！
本站资源全部来自网络和网友分享，如有侵犯您的权益，请联系网站QQ，或发邮件至。本网站尊重知识产权，无意侵犯知识产品，如有，联系网站人员，会第一时间删除！
小白基地，是小白资源网的官方网站，思必达学院官网，提供最新的创业技术支持与创业资讯，提供最新的思必达教程。是IT小白网友学习资源分享基地，中国互助创业资源网。提供诸如JAVA、PHP、MySQL、ASP、C语言等各类程序开发的教程资源。jsPDF 将html代码中的table导出为pdf文件怎么弄呀？有人做过吗？整了一天了。。
[问题点数：20分]
jsPDF 将html代码中的table导出为pdf文件怎么弄呀？有人做过吗？整了一天了。。
[问题点数：20分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|