vue 预览、下载pdf

1.下载pdf文件

因为pdf文件是传到oss上的，地址是下载地址，所可以使用a标签下载，但不能使用iframe等方法预览

<el-button class="download" v-if="list&&list.length>0" @click="downloadFile(fileList)" type="text">下载</el-button>

downloadFile(fileList){window.location.href = fileList[0].urlthis.$message.success('下载成功！');
},

2.使用vue-pdf预览pdf文件

1.安装vue-pdf

npm install --save vue-pdf

2.使用

<template><div class="pdf"><pdf ref="pdf":src="pdfUrl":page="pageNum":rotate="pageRotate"@password="password"@progress="loadedRatio = $event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum=$event" @error="pdfError($event)"@link-clicked="page = $event"></pdf><div class="pdf-tab"><el-button type="text" class="btn-def btn-pre" @click.stop="firstPage" :disabled="pageNum===1">首页</el-button><el-button type="text" class="btn-def btn-pre" @click.stop="prePage" :disabled="pageNum===1">上一页</el-button><el-button type="text" class="btn-def btn-next" @click.stop="nextPage" :disabled="pageNum===pageTotalNum">下一页</el-button><el-button type="text" class="btn-def btn-pre" @click.stop="lastPage" :disabled="pageNum===pageTotalNum">尾页</el-button><el-button type="text" class="btn-def" @click.stop="clock">顺时针</el-button><el-button type="text" class="btn-def" @click.stop="counterClock">逆时针</el-button><el-button type="text" class="btn-def" @click.stop="pdfPrintAll">全部打印</el-button><el-button type="text" class="btn-def" @click.stop="pdfPrint">部分打印</el-button></div><div class="pdf-page">{{pageNum}}/{{pageTotalNum}}</div><!-- <div>进度：{{loadedRatio}}</div><div>页面加载成功: {{curPageNum}}</div> --></div>
</template>
<script>
import pdf from 'vue-pdf'
export default {name: 'Pdf',components:{pdf},props: {pdfUrl: {type: String}},data(){return {pageNum:1,pageTotalNum:1,pageRotate:0,// 加载进度loadedRatio:0,curPageNum:0,}},mounted: function() {},methods: {firstPage() {this.pageNum = 1},prePage(){var p = this.pageNump = p>1?p-1:this.pageTotalNumthis.pageNum = p},nextPage(){var p = this.pageNump = p<this.pageTotalNum?p+1:1this.pageNum = p},lastPage() {this.pageNum = this.pageTotalNum},clock(){this.pageRotate += 90 },counterClock(){this.pageRotate -= 90 },password(updatePassword, reason) {updatePassword(prompt('password is "123456"'))},pageLoaded(e){this.curPageNum = e},pdfError(error){console.error(error)},pdfPrintAll(){this.$refs.pdf.print()},pdfPrint(){this.$refs.pdf.print(100,[1,2])},}
}
</script><style lang="scss" scoped>.pdf-tab {display: flex;}.pdf-page {text-align: right;}
</style>

vue 预览、下载pdf相关推荐

react集成react-pdf获取文件流预览下载pdf，展示电子签章
1.下载依赖包代码如下(示例): npm install react-pdf 2.引入依赖包代码如下(示例): import { Document, Page } from 'react-pdf' ...
Vue预览word/pdf文件(内外网均可)
预览word文件实现方式有 1 将文件放在前端静态文件中实现本地预览但前端包变得很大多文件不适合 2 通过跳转外网链接访问但内网无法使用 3 综合考虑利用浏览器自带的预览pdf 将文件放在 ...
vue预览word,excel,pptx,pdf文件
vue预览word,excel,pptx,pdf文件 1.做word,excel,pptx的预览,要先确定文件路径访问是通过域名的url来预览,不可以通过IP的url来访问先把文件路径的url进行u ...
【iframe结合pdf.js实现pdf的预览/下载及打印功能】
iframe结合pdf.js实现pdf的预览/下载及打印 1.[下载pdf.js](http://mozilla.github.io/pdf.js/getting_started/#download) ...
VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索，在iframe中获取选中文字，监听鼠标事件，右键菜单
一.VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索需求实现:vue实现预览pdf文件,获取到鼠标选中的文字数据.调用pdf.js自带的搜索方法实现搜索功能(后期可以调用该接口满足其他 ...
java pdf文件下载_Java后台返回PDF文件预览下载
Java后台返回PDF文件预览下载开始的代码的系统代码为: ResponseEntity onePdf = s3Wrapper.download(contractEntity.getContract ...
钉钉小程序上传预览下载word，pdf文档等一系列问题
钉钉小程序上传预览下载word,pdf文档等一系列问题小程序"用完即走"的理念使得有着很好的发展市场,不仅微信小程序,支付宝,钉钉小程序等都受用户的喜爱. 刚接触了一个企业内部应 ...
vue 预览并下载本地word
vue 预览并下载本地word 需要下载 docx-preview <template><div class="docxPreview"><el-ro ...
itext5预览/下载/字节流方式生成PDF
原文链接:https://www.cnblogs.com/waft/p/15603802.html Java itext5预览/下载/字节流方式生成PDF,并设置页眉页脚,html识别,行首标点长数字 ...
微信小程序实现PDF预览功能——pdf.js(含源码解析）
文章目录前言一.pdf.js 是什么? 二.使用步骤 1.下载库文件 2.使用方式微信小程序端--使用 web-view 标签 H5 端--使用 iframe 标签(使用vue框架) 3.更改源 ...

vue 预览、下载pdf

1.下载pdf文件

2.使用vue-pdf预览pdf文件

vue 预览、下载pdf相关推荐

最新文章

热门文章