pdf 在线预览之 pdfobject插件
支持到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插件的更多相关文章
- pdf 在线预览之 pdfjs插件
这个插件不需要阅读器 也不会屏蔽签章 但是也是兼容到ie11
- pdf 在线预览之 vue-pdf插件
vue-pdf 支持到ie11npm安装:npm install --save vue-pdf 组件template: <div class="show-pdf"> ...
- 实战动态PDF在线预览及带签名的PDF文件转换
开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...
- 动态PDF在线预览
实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...
- Office在线预览及PDF在线预览的实现方式史上最全大集合
Office在线预览及PDF在线预览的实现方式大集合 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPD ...
- Aspose office (Excel,Word,PPT),PDF 在线预览
前文: 做个备份,拿的是试用版的 Aspose,功能见标题 代码: /// <summary> /// Aspose office (Excel,Word,PPT),PDF 在线预览 // ...
- Office在线预览及PDF在线预览的实现方式大集合
一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPDFandXPS.exe可以导出PDF文件,然后再利用免 ...
- Office在线预览及PDF在线预览的实现方式
原文链接:http://www.officeweb365.com/officetoview.html 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office ...
- 记一次关于pdf 下载需求变更到 pdf 在线预览
背景: 之前的需求是根据接口中提供的Blob数据实现PDF下载,已实现代码如下: 1 const url = window.URL.createObjectURL(newBlob([response. ...
随机推荐
- 《TypeScript入门教程》笔记
基础 原始数据类型 布尔值 let isDone: boolean = false; 数值 let decLiteral: number = 6; 字符串 let myName: string = ' ...
- MySQL存储引擎简介-MyISAM和InnoDB的区别
上篇文章<MySql逻辑结构简介>我们聊到了存储引擎,可以说MySQL可插拔的多元化存储引擎给我们的使用者带来了很灵活的选择. 这篇文章我们来聊一下目前主流的两种存储引擎MyISAM和In ...
- 基于Mustache实现sql拼接
目录 一.前言 二.Mustache语法 三.Mustache拼接sql 一.前言 Mustache语法是一种模板语法,它可以帮我们拼接我们想要的东西.入职新公司,而项目里的sql语句就是用Musta ...
- [BZOJ4310] 跳蚤 SAM || SA
没有代码的. 传送门 先二分出第 \(mid\) 大的字串 \(s\),然后从后往前切割,每次大于 \(s\) 了就不行. 涉及到的操作:求第 \(mid\) 大子串:比较两个字串(求 \(lcp\) ...
- 如何实现一个MVVM
说一说我对于mvvm模型的理解吧 我第一次接触mvvm也是在学习vue的时候,在我看来vue和react都是数据驱动视图,但是vue属于标准的mvvm模型,react是从组件化演变而来 不多废话,直接 ...
- 没NOIP了?
HSEZ李亮:“考虑一下来HSEZ当艺术生吧!"
- 使用Typescript重构axios(十四)——实现拦截器
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 【Swift】UNNotificationServiceExtension
一.简介 An object that modifies the content of a remote notification before it's delivered to the user. ...
- 201871010114-李岩松《面向对象程序设计(java)》第十一周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- java多线程与线程并发二:线程互斥
本文章内容整理自:张孝祥_Java多线程与并发库高级应用视频教程 当两条线程访问同一个资源时,可能会出现安全隐患.以打印字符串为例,先看下面的代码: // public class Test2 { p ...