参考文档: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方法 )

无论从功能、兼容性还有社区活跃度PDFJS 都是不二选择。

官网(https://mozilla.github.io/pdf.js/getting_started/#download)下载PDFJS,注意放在static文件目录下

接下来将以返回流到客户端讲解

1.在对应的vue组件将iframe引入:

<el-dialog title="" :visible.sync="dialogVisible" width="80%" top="20px">
  <div class="pdf" style="height: 450px">
    <iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
  </div>
</el-dialog>

2.我们试过的错,前人已经帮我们试过了

如果返回就是blob,则{type:"application/zip"}可不填或写为

{type:"application/pdf"}

最终实现方式为

补充:encodeURI() 把字符串编码为 URI

encodeURIComponent() 把字符串编码为 URI 组件

发现encodeURI不会对:/?&等uri中起分割作用的字符进行编码;

encodeURIComponent则会。

所以必须选择 encodeURIComponent 进行对url的编码

需要后台实现方式的可以给我发邮件904545149@qq.com

不积跬步,无以至千里;不积小流,无以成江海。

vue文件流转换成pdf预览(pdf.js+iframe)的更多相关文章

  1. [Asp.net]使用flexpaper+swftools大文件分页转换实现在线预览

    引言 之前总结了在线预览几种常见解决方案,可以戳这里: http://www.cnblogs.com/wolf-sun/p/3569960.html http://www.cnblogs.com/wo ...

  2. vue 项目文件流数据格式转blob图片预览展示

    为了图片安全性,有时候上传图片后后台不会直接返回图片地址,会返回文件流的数据格式,这种格式需要处理下才能展示在页面上   // 使用axios请求上传接口 axios({ method: 'get', ...

  3. 图片转换成base64预览

    来源:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL 真心不错写得,思路比较清晰.已经测试过 注意: ...

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

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

  5. vue、Element 点击按钮以弹窗形式预览pdf文件

    直接上代码吧 <div > <el-button type="success" size="small" @click="isVie ...

  6. 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html

    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...

  7. #网页中动态嵌入PDF文件/在线预览PDF内容#

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  8. 前端实现在线预览pdf、docx、xls、ppt等文件

    思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...

  9. 网页上预览pdf文件的几种方案

    网页上查看pdf的方案: 1.使用adobe reader的插件 2.使用在线office控件 3.使用火狐开源项目pdf.js(浏览器需支持html5) 4.将pdf转换为swf文件 5.使用pdf ...

随机推荐

  1. 【TCP】拥塞控制

    TCP拥塞控制 出现拥塞           ∑对资源的需求 > ∑可用资源 拥塞控制是防止过多的数据注入到网络中,使网络中的路由器或链路不过载,这是一个全局性的. 流量控制是点对点的通信量的控 ...

  2. Spring-AOP-学习笔记(2)-AspectJ

    1.启用@AspectJ,需要下载aspectjweaver.jar <!-- 默认启用动态代理 --><aop:aspectj-autoproxy/> <!-- 注解启 ...

  3. java线程基础巩固---构造Thread对象你也许不知道的几件事

    关于Thread的构造在JDK文档中如下: 之后会把上面所有的构造都会学习到,这次主要是去研究一下图上标红的默认构造,当然大家肯定对于它都有些不屑,这有啥可学的,不new一个然后start线程不就启动 ...

  4. ASP.netMVC验证码

    .复制下列代码,拷贝到控制器中. #region 生成验证码图片 // [OutputCache(Location = OutputCacheLocation.None, Duration = 0, ...

  5. java 如何实现文件变动的监听

    获取修改时间 long lastTime = file.lastModified(); 原文链接:https://blog.csdn.net/liuyueyi25/article/details/79 ...

  6. poj3417 Network/闇の連鎖[树上差分]

    首先隔断一条树边,不计附加边这个树肯定是断成两块了,然后就看附加边有没有连着的两个点在不同的块内. 方法1:BIT乱搞(个人思路) 假设考虑到$x$节点隔断和他父亲的边,要看$x$子树内有没有点连着附 ...

  7. asp.net操纵Oracle存储过程

    在bloginfo数据库中,利用用户名 system 密码 scy251147 选择超级管理员登陆  创建如下存储过程:  1 /*存储过程*/ 2 create or replace procedu ...

  8. linux编译esp8266

    编译工具是xtensa-lx106-elf-gcc,一般会在~/.bashrc文件下添加 export PATH="$HOME/esp-open-sdk/xtensa-lx106-elf/b ...

  9. mongodb批量处理

    mongodb支持批量插入. 1.使用Java mongodb api 查看源码com.mongodb.MongoCollectionImpl,有两个方法 @Override public void ...

  10. html上标与下标应用

    HTML 标签应用示例: <html> <head> <meta http-equiv="Content-Type" content="te ...