支持到ie9 
可以不用安装  如果安装 npm i pdfobject

第一步:引入pdfObject包 申明一个变量

const { PDFObject } = require("../../assets/js/pdfobject");

组件中:写一个存放的位置

    <div id="pdfContent"></div>

js中:

这个插件 兼容谷歌 但是兼容ie的前提下是该浏览器支持pdf在线阅读 可以支持到ie9 亲测可用

所以js中先来一段提示

以上调用的this.pdfshow(this.purl)    参数是路径 方法如下

//显示文件方法,就是将文件展示到div中
pdfShow(url) {
console.log(document.querySelector("#pdfContent"));
//这是直接插入html
// document.querySelector(
// "#pdfContent"
// ).innerHTML = `<iframe style="height:100%;width:100%;" src="${url}"></iframe>`;
PDFObject.embed(this.docInfo.href, "#pdfContent");

以上可以看到 用iframe被我注释了   因为预览的时候有功能例如另存 全屏  打印等自带功能但是我们不需要 所以换成PDFObject插件

PDFObject中禁用的设置

var options = {
pdfOpenParams: {
pagemode: "thumbs",
toolbar: 0,
navpanes: 0,
statesbar: 0,
view: "FitV",
scrollbars: "0"
}
};
所以对于使用的时候就要加上 options设置
 PDFObject.embed(this.docInfo.href, "#pdfContent", options);

最终效果  可以看到功能性的不显示了 只有右下角的放大缩小

下载路径

http://ardownload.adobe.com/pub/adobe/reader/win/11.x/11.0.00/zh_CN/AdbeRdr11000_zh_CN.exe

pdf 在线预览之 pdfobject插件的更多相关文章

  1. pdf 在线预览之 pdfjs插件

    这个插件不需要阅读器 也不会屏蔽签章 但是也是兼容到ie11

  2. pdf 在线预览之 vue-pdf插件

    vue-pdf   支持到ie11npm安装:npm install --save vue-pdf 组件template: <div class="show-pdf"> ...

  3. 实战动态PDF在线预览及带签名的PDF文件转换

    开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...

  4. 动态PDF在线预览

    实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...

  5. Office在线预览及PDF在线预览的实现方式史上最全大集合

    Office在线预览及PDF在线预览的实现方式大集合 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPD ...

  6. Aspose office (Excel,Word,PPT),PDF 在线预览

    前文: 做个备份,拿的是试用版的 Aspose,功能见标题 代码: /// <summary> /// Aspose office (Excel,Word,PPT),PDF 在线预览 // ...

  7. Office在线预览及PDF在线预览的实现方式大集合

    一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPDFandXPS.exe可以导出PDF文件,然后再利用免 ...

  8. Office在线预览及PDF在线预览的实现方式

    原文链接:http://www.officeweb365.com/officetoview.html 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office ...

  9. 记一次关于pdf 下载需求变更到 pdf 在线预览

    背景: 之前的需求是根据接口中提供的Blob数据实现PDF下载,已实现代码如下: 1 const url = window.URL.createObjectURL(newBlob([response. ...

随机推荐

  1. 《TypeScript入门教程》笔记

    基础 原始数据类型 布尔值 let isDone: boolean = false; 数值 let decLiteral: number = 6; 字符串 let myName: string = ' ...

  2. MySQL存储引擎简介-MyISAM和InnoDB的区别

    上篇文章<MySql逻辑结构简介>我们聊到了存储引擎,可以说MySQL可插拔的多元化存储引擎给我们的使用者带来了很灵活的选择. 这篇文章我们来聊一下目前主流的两种存储引擎MyISAM和In ...

  3. 基于Mustache实现sql拼接

    目录 一.前言 二.Mustache语法 三.Mustache拼接sql 一.前言 Mustache语法是一种模板语法,它可以帮我们拼接我们想要的东西.入职新公司,而项目里的sql语句就是用Musta ...

  4. [BZOJ4310] 跳蚤 SAM || SA

    没有代码的. 传送门 先二分出第 \(mid\) 大的字串 \(s\),然后从后往前切割,每次大于 \(s\) 了就不行. 涉及到的操作:求第 \(mid\) 大子串:比较两个字串(求 \(lcp\) ...

  5. 如何实现一个MVVM

    说一说我对于mvvm模型的理解吧 我第一次接触mvvm也是在学习vue的时候,在我看来vue和react都是数据驱动视图,但是vue属于标准的mvvm模型,react是从组件化演变而来 不多废话,直接 ...

  6. 没NOIP了?

    HSEZ李亮:“考虑一下来HSEZ当艺术生吧!"

  7. 使用Typescript重构axios(十四)——实现拦截器

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  8. 【Swift】UNNotificationServiceExtension

    一.简介 An object that modifies the content of a remote notification before it's delivered to the user. ...

  9. 201871010114-李岩松《面向对象程序设计(java)》第十一周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  10. java多线程与线程并发二:线程互斥

    本文章内容整理自:张孝祥_Java多线程与并发库高级应用视频教程 当两条线程访问同一个资源时,可能会出现安全隐患.以打印字符串为例,先看下面的代码: // public class Test2 { p ...