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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
小程序实现留言板
Nov 02 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
Vue实现跑马灯效果
May 25 Javascript
JS继承实现方法及优缺点详解
Sep 02 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
PHP遍历二维数组的代码
2011/04/22 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
python怎么判断模块安装完成
2020/06/19 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
日本小田急百货官网:Odakyu
2018/07/19 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
相亲活动方案
2014/08/26 职场文书
政风行风评议整改方案
2014/09/15 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
关于mysql中string和number的转换问题
2022/06/14 MySQL