最近的工作中遇到了很多坑,主要是因为最近做的报表,需要展示pdf文件,遇到很多问题,在这里我来一一描述下。
以下是大概遇到的问题描述:

  • 使用的h5的embed标签展示pdf文件。ie那货却必须要装插件才能预览。简直恶心
  • 经理让去掉打印和下载按钮,就是要自己控制浏览器的显示

##第一个问题的解决
当时再网上查询了这种资料,决定将embed换成 PDFObject.js
然后就在github上下载pdfobject.js的源码。https://github.com/pipwerks/PDFObject ,将核心js pdfobject.js 引入到自己项目中。

<script type="text/javascript">
 
      window.onload = function (){
        var myPDF = new PDFObject({ url: "sample.pdf" }).embed();
      };
 
</script>

这个方法是拷过来的 其实我使用中这个是不行的。
也可以查看官网中的example https://pdfobject.com/#examples 选择嵌入页面就查看
Embed two PDFs on one HTML page
官网信息
embed中可以添加参数。
这样就成功的引入了PDFObject.js并使用它显示了pdf。
(记住:对象PDFObject中的O是大写的)
使用简单的符号标识不同的标题,将某些文字标记为粗体或者斜体,创建一个链接等,详细语法参考帮助?。

##第二个问题的解决
换成这个以后还是不能满足去掉打印和下载按钮的需求,所以接着换成了pdf.js
pdf.js的源码这里下载:http://mozilla.github.io/pdf.js/getting_started/#download
然后将整个项目引入你自己的项目中,中间试过action请求返回viewer.html页面,但是没走通,主要是因为他的file参数没法传递。
我在代码中添加了 iframe标签 用来预览pdf,这时候又因为手误,造成了不必要的工作量, iframe 不能使用/关闭,必须是准确关闭。
然后就将对应的页面展示信息传递给iframe的src参数就可以了。

这里写图片描述

例如这样 首相要保证 你的src路径是正确的,你自己可以访问。这样就没啥问题了 。
然后在viewer.html找到这两个按钮 设置disable为none即可。

如果觉着不错,可以关注我的公众号
在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐