vue实现pdf文件的在线预览
我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求 如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件,功能强大。
<iframe
:src="url"
type="application/x-google-chrome-pdf"
width="100%"
height="100%" />
export default {
data() {
return {
url: ``,
};
}
mounted() {
this.url=`http://192.168.1.110:5000/assets/doc/xx调度方案7.pdf`;
}
游览器中在线的内容

这是控制台中有关pdf的内容

可以看到 , 之前的 <iframe /> 标签被替换成<embed> , 而且游览器会自动增加相关pdf的插件
vue实现pdf文件的在线预览的更多相关文章
- 前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览 我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求 如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
- Atitit.office word excel ppt pdf 的web在线预览方案与html转换方案 attilax 总结
Atitit.office word excel ppt pdf 的web在线预览方案与html转换方案 attilax 总结 1. office word excel pdf 的web预览要求 ...
- [置顶] 如何在浏览器中打开PDF文件并实现预览的思路与代码
编写项目遇到一个需要在浏览器中打开PDF文件的问题.最终实现效果如下: 其实也就是简单的在浏览器中实现一个打开pdf文件,并有类似预览功能的边框. 其实在网上经常见到类似的页面,在浏览器中打开pdf文 ...
- H5拖拽 构造拖拽及缩放 pdf文件转换为html预览
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
- pdf.js实现图片在线预览
项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
- 前端实现在线预览pdf、word、xls、ppt等文件
最近在做一个公司的资源管理系统,一些知识小记一下. 1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下 ...
- 前端实现在线预览pdf、docx、xls、ppt等文件
思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...
- 前端实现docx、pdf格式文件在线预览
theme: vuepress highlight: atelier-heath-light 介绍 在业务中,如果遇到文档管理类的功能,会出现需要在线预览的业务需求,本文主要是通过第三方库来实现文档预 ...
- 怎么在线预览.doc,.docx,.ofd,.pdf,.wps,.cad文件以及Office文档的在线解析方式。
前言 Office文件在线预览是目前移动化办公的一种新趋势.Office在线预览指的是Office系列的文件在线查看而不依附域客户端的存在.在浏览器或者浏览器控件中可以预览查看Word.PDF.Exc ...
随机推荐
- 学习使用CompletableFuture
CompletableFuture 一.前言 1.JDK5的异步处理方式 2.JDK8的异步处理方式 二.学习CompletableFuture 1.结果获取方式 2.创建CompletableFut ...
- 打开IDEA后tomcat不能用,Cannot load project of unknown project type,无法加载类或者项目
这一问题在网络中有比较统一的解决方法,我这个也是按这个方法解决的. 问题出现的前提和原因: 一个运行正常项目,我关闭后第二天打开发现tomcat不能用了. 解决方法: 我查了一下,这是一个IDEA软件 ...
- MySQL回顾
一. 对数据库的操作 1. 创建一个库 create database 库名 create database 库名 character set 编码 创建带有编码的 查看编码: 2. 删除一个库 dr ...
- 线程安全&Java内存模型
目录 Java内存模型 关于线程安全 Volatile关键字 Synchronized锁 重入锁 Lock锁 死锁 乐观锁与悲观锁 乐观锁(适合多读场景) 悲观锁(适合多写场景) Java内存模型 J ...
- 手写IOC实现过程
一.手写ioc前基础知识 1.什么是IOC(Inversion of Control 控制反转)? IoC不是一种技术,只是一种思想,一个重要的面向对象编程的法则,它能指导我们如何设计出松耦合.更优良 ...
- 2020-06-19:多线程消费kafka的时候,开发、测试环境都能每秒10w+,但是正式环境只能1w/s,正式环境不能重启,看怎么调试?
福哥答案2020-06-19: 答案来自群成员:基准测试. 观察 网络和磁盘的读写,实时与历史曲线,观察文件句柄/内存的使用情况.观察系统patch 基础库/运行时状态.
- 【面经】超硬核面经,已拿蚂蚁金服Offer!!
写在前面 很多小伙伴都反馈说,现在的工作不好找呀,也不敢跳槽,在原来的岗位上也是战战兢兢!其实,究其根本原因,还是自己技术不过关,如果你技术真的很硬核,怕啥?想去哪去哪呗!这不,我的一个读者去面试了蚂 ...
- SG 函数学习
\(Mex\) 运算 \(mex(S)\) 为不属于集合 \(S\) 的最小非负整数,即: \[mex(S)=\min \limits_{x \in \mathbb{N},x \not\in S} \ ...
- Finding the Right EAV Attribute Table
$customer = Mage::getModel('catalog/product'); $entity = $customer->getResource(); $attribute = M ...
- latex:公式环境
1.单行公式环境 equation 单行公式环境equation可将一个公式,不管多长都可排版为一行,并给出一个序号.而由系统提供的displaymath环境等效于公式宏包提供的equation*环境 ...