vue pdf下载及预览（移动端）

本文使用的是 vue-pdf，其实还有其他的很多比如pdf.js，只不过觉得这个和vue结合了应该不用下载一堆东西，直接npm install就可以，所以采用vue-pdf来撰写pdf下载及预览。

无论是预览还是下载，都需要安装vue-pdf

先看下效果：

1、安装vue-pdf

npm install --save vue-pdf

2、在需要的组件里面引用

import pdf from 'vue-pdf'components: {pdf},

3、在需要的vue文件中引入vue-pdf，pdf引入以及使用的位置，如下图：

一、pdf下载

1、先在template中定义一个下载按钮，添加事件

<span @click.stop="gotoOption('downLoad', item['article'], index)"><i class="iconfont iconxiazai1"></i>下载</span>

2、methods中定义方法：

gotoOption (val, item, index) {if (val === 'collect') {this.collectReport(item, index)} else if (val === 'downLoad') {this.downloadWeekly(item['local_access_full-text-link'], item['article_article-title'], item['uuid'])}},

    // 下载downloadWeekly (url, pdfName, uuid) {// 调用子组件的下载方法this.downloadPDF(url, pdfName, uuid)},downloadPDF (url, fileName, uuid) {const _this = thisfetch(url).then(function (response) {if (response.ok) {return response.arrayBuffer()}throw new Error('Network response was not ok.')}).then(function (arraybuffer) {let blob = new Blob([arraybuffer], {type: `application/pdf;charset-UTF-8` // word文档为msword,pdf文档为pdf})let objectURL = URL.createObjectURL(blob)let downEle = document.createElement('a')let fname = fileName // 下载文件的名字// let fname = `download` // 下载文件的名字downEle.href = objectURLdownEle.setAttribute('download', fname)document.body.appendChild(downEle)downEle.click()DownloadArticleList({ // 此处是调用接口，将下载的文件信息传给后台uuid: uuid,openid: _this.openid}).then(res => {if (res.data.errno === 0) {alert('下载完成')}console.log('xiazai:', res.data)})}).catch(function (error) {console.log('There has been a problem with your fetch operation: ', error.message)})},

以上就是pdf下载

二、pdf预览

一共有两种方法，一种是分页，还可以放大缩小，另一种是不分页，还未实现放大缩小

1、第一种是分页的pdf预览，也可以实现放大，代码如下：

<template><div class="collect_info"><div class="score_header"><div class="return__icon" @click="returnBack"><i class="iconfont iconfanhui"></i></div><div class="title">下载详情</div></div><div class="pdf" v-show="fileType === 'pdf'"><p class="arrow"><!--      // 上一页--><span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage===1}">上一页</span>{{currentPage}} / {{pageCount}}<!--      // 下一页--><span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage===pageCount}">下一页</span></p><!--    // 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了--><!--    // src需要展示的PDF地址--><!--    // 当前展示的PDF页码--><!--    // PDF文件总页码--><!--    // 一开始加载的页面--><!--    // 加载事件--><pdf :src="src" :page="currentPage"@num-pages="pageCount=$event"@page-loaded="currentPage=$event"@loaded="loadPdfHandler"></pdf></div></div>
</template><script>
import pdf from 'vue-pdf'
export default {metaInfo: {meta: [{ charset: 'utf-8' },{ name: 'viewport', content: 'width=device-width,initial-scale=1.0, maximum-scale=2.0, user-scalable=yes' }]},components: {pdf},data () {return {currentPage: 0, // pdf文件页码pageCount: 0, // pdf文件总页数fileType: 'pdf', // 文件类型src: '', // pdf文件地址}},computed: {pdfInfo () { // 这个是路由跳转携带的关于pdf的信息，包含链接，链接是可以直接打开pdf文件的return this.$route.query.pdfInfo}},created () {// 有时PDF文件地址会出现跨域的情况,这里最好处理一下this.src = pdf.createLoadingTask(this.pdfInfo.url)},methods: {returnBack () {this.$router.push({name: 'myDownLoad'})},// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页changePdfPage (val) {// console.log(val)if (val === 0 && this.currentPage > 1) {this.currentPage--// console.log(this.currentPage)}if (val === 1 && this.currentPage < this.pageCount) {this.currentPage++// console.log(this.currentPage)}},// pdf加载时loadPdfHandler (e) {this.currentPage = 1 // 加载的时候先加载第一页}}
}</script>
<style lang="scss" scoped>.collect_info {height: 100%;display: flex;flex-direction: column;/*background: #f8f8f8;*/position: relative;}.score_header {text-align: center;letter-spacing: 0.2em;position: relative;font-size: 18px;width: 100%;background-color: rgb(0, 115, 231);color: #fff;height: 45px;line-height: 45px;flex: none;z-index: 1;}.return__icon{position: absolute;margin-left: 15px;}.iconfanhui {margin-top: 10px;font-size: 20px;}.pdf {text-align: center;.arrow {margin: 8px 0;/*font-size: 14px;*/}.grey {color: #9c9c9c;}}
</style>

pdf链接打开是这样的：

2、第二种是不分页的不可以实现放大缩小，但是可以上下滚动

<template><div class="collect_info"><div class="score_header"><div class="return__icon" @click="returnBack"><i class="iconfont iconfanhui"></i></div><div class="title">下载详情</div></div><div class="pdfIn" v-show="fileType === 'pdf'" ref="pdfView"><div><pdfv-for="i in numPages"ref="pdfs":src="src":key="i":page="i"></pdf></div></div></div>
</template><script>
import pdf from 'vue-pdf'
import BScroll from 'better-scroll'
export default {metaInfo: {meta: [{ name: 'viewport', content: 'width=device-width,initial-scale=1.0, maximum-scale=2.0, user-scalable=yes' }]},components: {pdf},data () {return {fileType: 'pdf', // 文件类型src: '', // pdf文件地址numPages: 0, // 总页数pdfScroll: null,}},computed: {pdfInfo () { // 路由携带的参数，包括pdf链接return this.$route.query.pdfInfo}},created () {// 有时PDF文件地址会出现跨域的情况,这里最好处理一下this.src = pdf.createLoadingTask(this.pdfInfo.url)this.src.promise.then(pdf => {this.numPages = pdf.numPages})this.init()},methods: {returnBack () {this.$router.push({name: 'myDownLoad'})},init () {this.$nextTick(() => {this.pdfScroll = new BScroll(this.$refs.pdfView, {click: true})})},}
}</script>
<style lang="scss" scoped>.collect_info {height: 100%;display: flex;flex-direction: column;/*background: #f8f8f8;*/position: relative;}.score_header {text-align: center;letter-spacing: 0.2em;position: relative;font-size: 18px;width: 100%;background-color: rgb(0, 115, 231);color: #fff;height: 45px;line-height: 45px;flex: none;z-index: 1;}.return__icon{position: absolute;margin-left: 15px;}.iconfanhui {margin-top: 10px;font-size: 20px;}.pdfIn {height: calc(100% - 50px);overflow: hidden;}
</style>

以上就是关于pdf下载和预览的一些分享，哪里有不对的，欢迎指正~

vue pdf下载及预览（移动端）相关推荐

fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
vue pdf文件下载 / 在线预览真是有效！
1.pdf下载首先说下下载问题, 通过文件地址下载存留问题无法下载试过a标签搭配文件地址下载,最后发现行不通,一点击下载就直接打开了,不符合需求. 通过文件流形式,完美解决, 这里通过后端把文 ...
Vue中使用pdfJs预览PDF、图片
Vue中使用pdfJs预览PDF.图片 pdf.js是一个使用HTML5构建的可移植文档格式库.它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能. 实现步骤如下: 1.下载pdfJ ...
vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...
浏览器点击pdf的链接——实现下载或预览功能——基础积累
最近在做后台管理系统时,遇到了一个需求,就是点击pdf链接时,需要实现文档的下载. 点击链接,通常就会用到a标签,将链接放在href参数中,点击时就会触发相应的事件了. 常规写法如下: <a : ...
vue+iview 内网预览(本文重点)+外网预览word、excel、pdf、ppt
访问内网文件思路如下: 1.后端将word.excel.pdf文件转为二进制文件流前端将文件流转为html从而实现文件预览 2.pdf没这么复杂具体可看下文 3.ppt的实现方式是后端将ppt转为p ...
安卓手机实现无需下载即可预览pdf文件
1.从pdf.js官网中下载实例,里面可以把相关的文件放在oss或者web服务上,但是要修改demo中的html文件(Mac打不开该实例的html文件,打开是个空白,window可以,原因未知,不影响 ...
vue 实现pdf文件在线预览
PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下第一种,使用vue-pdf 安装 npm install --save vue-pdf 页面代码 <tem ...
微信小程序saveFile，openDocument方法下载、预览pdf文件不能用本地应用打开（不能另存为）的问题
微信小程序saveFile,openDocument方法下载.预览pdf文件不能用本地应用打开(不能另存为)的问题查看官方文档的openDocument()方法,发现加一个showMenu: tru ...

vue pdf下载及预览（移动端）

1、安装vue-pdf

2、在需要的组件里面引用

3、在需要的vue文件中引入vue-pdf，pdf引入以及使用的位置，如下图：

一、pdf下载

1、先在template中定义一个下载按钮，添加事件

2、methods中定义方法：

二、pdf预览

1、第一种是分页的pdf预览，也可以实现放大，代码如下：

2、第二种是不分页的不可以实现放大缩小，但是可以上下滚动

vue pdf下载及预览（移动端）相关推荐

最新文章

热门文章

vue pdf下载及预览（移动端）

1、安装vue-pdf

2、在需要的组件里面引用

3、在需要的vue文件中引入vue-pdf，pdf引入以及使用的位置，如下图：

一、pdf下载

1、先在template中定义一个下载按钮，添加事件

2、methods中定义方法：

二、pdf预览

1、第一种是分页的pdf预览，也可以实现放大，代码如下：

2、 第二种是不分页的不可以实现放大缩小，但是可以上下滚动

vue pdf下载及预览（移动端）相关推荐

最新文章

热门文章

2、第二种是不分页的不可以实现放大缩小，但是可以上下滚动