JS展示预览PDF。

刚好遇到需求,需要在手机端--展示一个电子收据,电子收据返回是PDF格式的,所以需要在前端上面去做PDF预览。

在学习过程中,了解到一种很简单,不需要任何插件的方法做PDF预览,但是这方法有局限性.

代码如下:

<object data="../assets/09.pdf" type="application/pdf" width="100%" height="100%">

<iframe src="../assets/09.pdf" width="100%" height="100%" style="border: none;">

This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a>

</iframe>

</object>

直接在HTML,中嵌入上诉代码,在支持PDF格式的浏览器中就可以直接查看了。

局限性:低版本IE,不能直接查看,  手机端这样使用的话,也是不能直接查看的 ,UC等浏览器会提示你下载 或者转码预览,不能嵌入在网页中查看,微信浏览器就更只能下载,不能直接查看,所以想再HTML直接查看是不行,那么我们就要使用第二种方法。

未完,待续。

原文地址:https://www.cnblogs.com/leolovexx/p/9286706.html

时间: 2024-09-28 12:22:47

JS展示预览PDF。的相关文章

fis3+vue+pdf.js制作预览PDF文件或其他

人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠人玫瑰,手留余香呢?终于时候到了...哈哈 首先容我吐槽一番,在大前端的背景下各种框架层出不穷,相对的各种打包工具也应用而生,要说最火的就是webpack了,用户多所以社区相对活跃,团队维护,网上也有各种各样的问题可以轻易搜到从而解决自己的遇到的各种奇葩问题,所以90%的项目都会采用webpack来

[pdf.js]预览pdf时,中文名称乱码的问题

在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" charset="gb2312"></script> 结果

vue文件流转换成pdf预览(pdf.js+iframe)

参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/     支持获取文件流到客户端,生成blob地址预览 ViewerJS: http://viewerjs.org/   预览pdf文件,其pdf文件只能url地址 Vue-pdf https://github.com/FranckFreiburger/vue-pdf 会出现空白页( 推荐使用iframe方法 ) 无论从功能.兼容

js预览PDF文件,使用iframe实现

有时候需要预览PDF文件,需要实现可放大.缩小.下载.打印等功能,我使用了iframe框架. 实现效果: 实现代码: 我直接写在了一个公共组件中,在需要预览的页面直接引用该子组件即可. <iframe :src="src" frameborder="0" style="width: 100%; height: 100%"></iframe> data() { return { src: 'http://storage.xu

WEB在线预览PDF

这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf2html软件将PDF转换成HTML. 用法: PDF2HTML [选项] <PDF 文件> [<HTML 文件>] -f <页数>   : 转换开始页-l <页数>  : 转换结束页-z <缩放率>        : 设置转换缩放率,从 50 到

在线预览PDF格式的需求

在线预览PDF格式的需求,FlexPaper.flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swftool 配合使用,在程序运行时将pdf文件转换为swf格式的文件.主要原理1.通过第三方工具openoffice,将word.excel.ppt.txt等文件转换为pdf文件2.通过swfTools将pdf文件转换成swf格式的文件3.通过FlexPaper文档组件在页面上进行展示 <!DOCTYPE html PUBLIC "-//W3C//DTD

实现在线预览PDF的几种解决方案

原文:实现在线预览PDF的几种解决方案 因客户需要实现PDF的预览处理,在网上找了一些PDF在线预览的解决方案,有的用PDFJS的在线预览方式,有的使用PDFObject的嵌入式显示,有的通过转换JPG/PNG方式实现间接显示的方式,开始是想通过简单的方式,能够使用JS插件实现预览最好,可是在线预览总是有一些不足,如不同浏览器的兼容问题,甚至不同的手机平台中展示的效果也不一样,不过最好还是采用了间接的方式,把PDF转换为图片展示效果,达到客户的要求. 1.在线实现预览的方式 一开始我还是很倾向使

linux在线预览pdf文件开发思路

准备:swftools,flexpaper 基本思路: 1,将pdf文件转化成swf文件 2,使用flexpaper预览swf文件 主要代码: 1,在linux中安装swftools.官网下载swftools 安装包,解压 2,./configure --prefix=安装路径 make install 执行完之后,执行pdf2swf -help 如果显示.说明安装成功 如果执行pdf2swf -help  显示commond not find 的话,可能需要配置swftools的环境变量,具体

ASP.NET MVC 项目直接预览PDF文件

背景及需求 项目使用的是MVC4框架,其中有一个功能是根据设置生成PDF文件,并在点击时直接预览. 实现过程 1.第一版实现代码: HTML内容 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> &