在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我有一个pdf文件，在用户点击按钮时需要打开，最开始用了a标签src=xxx/xx.pdf，但是打不开；
又上网搜了下，用了jquery.media.js，这个js应该是将pdf内容解析嵌入到iframe展示，
现在电脑可以正常阅读到内容了，但是通过浏览器的移动端模拟窗口查看时，还是不能打开。
因为我第一次做移动端项目，我不理解移动端和电脑解析代码区别，为什么会出现这样的不同？
因为不知道问题原理，也没办法搜索答案。或者能给我一个在移动端打开pdf文件的方法。谢谢
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
pdf2htmlpdf.js
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
直接打开的我没接触过，我之前是把pdf转成图片，以幻灯片的形式显示出来的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以考虑pdfjs
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
只所以有时候浏览器里能直接打开，是因为你用的那个浏览器刚好支持打开ftp文件，比如pc端的chromejquery.media.js这个可以用，(我不了解这个）应该是一个转码器移动端打不开，说明这个转码器对移动端那个浏览器不兼容
最好的做法就是，服务端转码
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
pdf.js用了这个，是可以的了，谢谢大家
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以 使用 在线PDF预览插件PDFObject.js，参见 示例
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。项目开发中遇到了一个变态需求，需要把一整个页面导出为pdf格式，而且要保留页面上的所有的表格、svg图片和样式。
简而言之，就是希望像截图一样，把整个页面截下来，然后保存成pdf。
咋不上天呢……
查了一下，能够实现html转pdf的方法还是挺多的，大概有以下几种：
1、大部分浏览器就有这个功能。然而我们客户要的可不是这个，人家要的是能够在系统中主动触发的导出为pdf功能，所以这种方案pass。
2、利用第三方工具。我找到了一种利用wkhtmltopdf这种工具来导出的方案，自己在我们的项目中试了一下，效果不好，而且对svg图片的支持也不行。pass。
3、还有一种是利用iText类后台生成java文件。但因为需要导出的这个页面是动态页面，而且直接把页面传给后台会丢失大量样式，所以还是pass。
最后没什么好的办法，只能退而求其次，想着要不先把html页面转成图片，再把图片导出为pdf。因为要支持用户导出下载，而且要保留样式，所以最好是纯js前端实现。
html转canvas的话，就用html2canvas这个js，这个网上介绍比较多了，这里就不废话了。
比较麻烦的是svg图片，直接用html2canvas无法把svg标签的内容转成canvas，最后查了一圈资料后，锁定了canvg这个js。canvg是谷歌的一个插件，可以将svg标签内容转成canvas。具体到我们的项目，还有一个难点，就是如何把glyphicons这种字体图标也转成canvas，因为在不同浏览器下对这种字体图标的支持是完全不一样的。最后找到的方法是用char code来替换这些字体图标，重新绘制成canvas。由canvas生成图片不用废话。由图片生成pdf用jsPDF实现。 折腾了大半天，总算把整个流程打通了，接下来一步一步贴上代码。
第一步：把对应dom节点里所有的svg元素替换成canvas
1 svg2canvas: function(targetElem) {
var svgElem = targetElem.find('svg');
svgElem.each(function(index, node) {
var parentNode = node.parentN
//由于现在的IE不支持直接对svg标签node取内容，所以需要在当前标签外面套一层div，通过外层div的innerHTML属性来获取
var tempNode = document.createElement('div');
tempNode.appendChild(node);
var svg = tempNode.innerHTML;
var canvas = document.createElement('canvas');
<span style="color: #
<span style="color: #
canvg(canvas, svg);
<span style="color: #
parentNode.appendChild(canvas);
<span style="color: #
<span style="color: # }
第二步：把glyphicons字体转成canvas。如果项目中没有用到glyphicons字体图标，可忽略这一步
1 glyphicons2canvas: function(targetElem, fontClassName, fontFamilyName) {
var iconElems = targetElem.find('.' + fontClassName);
iconElems.each(function(index, inconNode) {
var fontSize = $(inconNode).css("font-size");
var iconColor = $(inconNode).css("color");
var styleContent = $(inconNode).attr('style');
//去掉"px"
fontSize = fontSize.replace("px", "");
var charCode = getCharCodeByGlyphiconsName(iconName);
<span style="color: #
var myCanvas = document.createElement('canvas');
<span style="color: #
//把canva宽高各增加2是为了显示图标完整
<span style="color: #
myCanvas.width = parseInt(fontSize) + 2;
<span style="color: #
myCanvas.height = parseInt(fontSize) + 2;
<span style="color: #
myCanvas.style = styleC
<span style="color: #
var ctx = myCanvas.getContext('2d');
<span style="color: #
//设置绘图内容的颜色
<span style="color: #
ctx.fillStyle = iconC
<span style="color: #
//设置绘图的字体大小以及font-family的名字
<span style="color: #
ctx.font = fontSize + 'px ' + fontFamilyN
<span style="color: #
ctx.fillText(String.fromCharCode(charCode), 1, parseInt(fontSize) + 1);
<span style="color: #
$(inconNode).replaceWith(myCanvas);
<span style="color: #
<span style="color: # }
<span style="color: # //根据glyphicons/glyphicon图标的类名获取到对应的char code
<span style="color: # getCharCodeByGlyphiconsName: function(iconName) {
<span style="color: #
switch (iconName) {
<span style="color: #
case("glyphicons-resize-full"):
<span style="color: #
return "0xE216";
<span style="color: #
case ("glyphicons-chevron-left"):
<span style="color: #
return "0xE225";
<span style="color: #
<span style="color: #
return "";
<span style="color: #
<span style="color: # }
第三步：html转canvas转图片再转pdf
1 html2canvas($("#myExportArea"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/jpeg');
var img = new Image();
img.src = imgD
//根据图片的尺寸设置pdf的规格，要在图片加载成功时执行，之所以要*0.225是因为比例问题
img.onload = function() {
//此处需要注意，pdf横置和竖置两个属性，需要根据宽高的比例来调整，不然会出现显示不完全的问题
if (this.width & this.height) {
<span style="color: #
var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
<span style="color: #
<span style="color: #
var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
<span style="color: #
<span style="color: #
doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
<span style="color: #
//根据下载保存成不同的文件名
<span style="color: #
doc.save('report_pdf_' + new Date().getTime() + '.pdf');
<span style="color: #
<span style="color: #
<span style="color: #
background: "#fff",
<span style="color: #
//这里给生成的图片默认背景，不然的话，如果你的html根节点没设置背景的话，会用黑色填充。
<span style="color: #
allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas
<span style="color: # });
虽然最后勉强完成了客户的要求，但是生成的pdf效果明显不如正常截图来的清晰……水平所限，暂时只能想到这种方法，如果大家有更好的办法，欢迎指点。
一个简单的demo：https://github.com/SuperNaturalGit/HtmlToPdf
使用方法：
使用克隆项目到本地：git clone&https://github.com/SuperNaturalGit/HtmlToPdf.git
使用chrome浏览器打开index.html即可。其他浏览器的兼容性没测试。
如果不用git，直接把几个文件全部copy到本地，只要相对路径没问题，也可以运行的。
ps:评论里冷秋月同学对导出流程做了改良，可以解决闪烁以及背景的问题，大家可以参考。
阅读(...) 评论()电子书打不开怎么处理
按时间排序
下载时要注意格式问题，你可以根据电子书的格式选择 打开的 软件。。。比如后缀为。txt的 一般都能打开，.HTML就只能在网页里打开，.EXE只能在电脑里面打开，.PDF需要阅览器。.PDB&#47;PRC需要pad，.DOC当然就是 word了.......一般只要能看到后缀 就能找到打开的办法。除非文件不完整或加密 或系统不支持。
你好！若A710e无法打开小说文件，说明此格式不支持，或手机未装有读取此文件格式的阅读器。建议到联想乐商店上搜索下载“熊猫看书”使用，可支持txt、umd、epub、pdf、chm格式文本阅读，并且支持扫描读取SD存储卡上的电子书文件。下载地址：可以通过USB连接电脑同步安装软件。登陆联想PC乐商店，搜索相关软件，通过“豌豆荚同步软件”一键安装即可。豌豆荚安装使用步骤：1、在电脑端登录豌豆荚官网（）下载豌豆荚 Windows 版进行安装在电脑上；2、打开电脑端的豌豆荚软件；3、在你的手机中设置打开USB调试，在手机“系统设置--开发人员选项”下打开；4、在你的机器开机状态下，用USB数据线将机器和电脑连接；5、待豌豆荚软件识别你的机器，自动在电脑端安装好手机USB驱动 你就可以使用豌豆荚同步软件了6、登陆联想乐商店：如：搜索“熊猫看书”一键安装即可。下载安装等详情，可到豌豆荚软件界面查看。如果我们提供的技术方案有效，请您选择采纳为有效答案以便供其它用户参考，感谢。
可能是你的格式不对的原因，建议重新下载，注意自己的手机支持什么样的格式在进行下载
格式不正确吧，是什么电子书
你好；手机打不开网页，你可以看一下网络信号有没有问题，切换一下网络，看看浏览器的文件是不是损坏了。也有可能是不兼容造成的。你可以安装一个手机QQ浏览器，它兼容性能好，一般的手机都用的很好，它的体积小，不影响手机运行，浏览网页速度也非常快，可以一键即达。还特别的节省流量。任何智能手机都可以使用。谢谢
直接用safari 或者tofu看吧
都挺不错的
就是你手机里缺少相应的应用程序，你可以先下一个
手机的浏览器打不开有多方面原因。1，是网络不好的原因，你可以网络好的情况下在用。2，手机运行不过来，建议你经常清理手机里的垃圾。3，可能是手机自带的浏览器系统坏了。建议你换手机QQ浏览器就好了，它的安装包只有4m。不会影响手机的运行。即使信号不好的情况下，也可以打开。
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
确定要取消此次报名，退出该活动？
请输入私信内容：如何将html文件转成pdf 在线转换_百度知道
如何将html文件转成pdf 在线转换
我有更好的答案
如果你使用chrome浏览，就比较简单了。 点打印-目标-选本地另存为pdf即可。如果 你用IE，请你安装Adobe Acrobat XI Pro软件，用Adobe PDF打印机打印你要输出的内容，即可得到PDF文档。
采纳率：72%
来自团队：
为您推荐：
其他类似问题
您可能关注的内容
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。把一个含有多页的PDF文件插入WORD文档里，怎么才能全部显示出来，而不是只显示PDF的一页呢？_百度知道
把一个含有多页的PDF文件插入WORD文档里，怎么才能全部显示出来，而不是只显示PDF的一页呢？
是PDF文件显示出来放进去，不是推荐答案里面点击PDF连接的这种~
我有更好的答案
把一个含有多页的PDF文件插入WORD文档里，通常是显示PDF的第一页，双击第一页可以浏览整个PDF文件。还有两种方法可以解决第1种比较笨的，同时打开&pdf&和&word，pdf&把一页一页拖到word里，可以全部显示。第2种，需要整个文件都插入word，可以把pdf 直接转化，保存成word格式，再重新打开编辑。
采纳率：100%
打开你要添加附件的Word文档，然后把要作为附件的PDF文件直接拖拽你要添加的地方即可。 另外的方法就是“插入”菜单，插入对象命令，里面有很多object可以作为对象插入，你可以选择合适的。一般第一个（A ....A....D..）.就是
本回答被网友采纳
把PDF转成word直接放内容进去
安装Adobe Acrobat专业版，可以直接把PDF另存为WORD文档。
3条折叠回答
为您推荐：
其他类似问题
您可能关注的内容
word文档的相关知识
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}