vue实现在线预览pdf文件和下载(pdf.js)


Posted in Javascript onNovember 26, 2019

最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览)

最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果)

强烈推荐改插件,以下介绍用法

(1)下载插件

下载路径: pdf.js

(2)将下载构建后的插件放到文件中public(vue/cli 3.0)

vue实现在线预览pdf文件和下载(pdf.js)

(3)在vue文件中直接使用,贴上完整代码

<template>
 <div class="wrap">
  <iframe :src="pSrc" width="100%" height="100%"></iframe>
 </div>
</template>

<script>
 export default {
  name: "pdf",
  data() {
   return {
    pSrc:'',
   };
  },
  methods: {
   loadPDF () {
    //baseurl :pdf存放的文件路径,可以是本地的,也可以是远程,这个是远程的,亲测可以用
    let baseurl = 'http://image.cache.timepack.cn/nodejs.pdf';
    //ie有缓存加个随机数解决 + '?r=' + new Date()
    let pSrc = baseurl + '?r=' + new Date();
    this.pSrc = '../../plugin/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf';
   },
  },

  mounted: function() {
   this.loadPDF();
  }

 };
</script>

<style scoped>
.wrap{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 bottom: 0;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
Jquery注册事件实现方法
May 18 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 #Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 #Javascript
vue element-ui读取pdf文件的方法
Nov 26 #Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 #Javascript
jQuery实现轮播图效果
Nov 26 #jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 #Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 #Javascript
You might like
4.与数据库的连接
2006/10/09 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
php-fpm中max_children的配置
2019/03/15 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
如何用RxJS实现Redux Form
2018/12/29 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python实现测试磁盘性能的方法
2015/03/12 Python
python简单判断序列是否为空的方法
2015/06/30 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
成考报名单位证明范本
2014/01/16 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
员工自我评价范文
2015/03/11 职场文书
投标单位介绍信
2015/05/05 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书