vue pdf 实现上传，预览（利用vue-pdf组件支持翻页），下载功能
后台用MultipartFile实现文件上传，文件读写操作IO流

上传

<el-form ref="addForm" :model="addForm" label-width="130px" label-position="left"><el-form-item label="上传文件"><el-input v-model="addForm.fileName" placeholder="请上传文件" style="width: 220px;" :disabled="true"></el-input><el-uploadstyle="width: 200px;display: inline;margin-left: 25px;"class="upload-demo"ref="upload"action="":show-file-list="true":before-upload="beforeUpload"><el-button slot="trigger" type="danger" icon="el-icon-upload2">选取文件</el-button><el-button type="danger" @click="viewFile" icon="el-icon-view">预览</el-button></el-upload></el-form-item>
</el-form>

export default {data() {return {addForm:{file:null,fileName:'',fileData:null},}},methods:{//上传之前调用方法beforeUpload(file){this.addForm.file = file;this.addForm.fileName = file.name;// this.fileSize = file.size;const extension = file.name.split('.').slice(-1) == 'pdf'if (!extension) {this.$message.warning('上传模板只能是pdf格式!')return}let reader = new FileReader();reader.readAsDataURL(file);let that = this;reader.onload = function() {that.addForm.fileData = reader.result;};return false; // 返回false不会自动上传},//预览pdf 文件，这里用的是打开新窗口用浏览器查看PDFviewFile(){if(this.addForm.fileData == null){this.$message.warning('请先上传PDF文件');return false;}var win = window.open();win.document.write('<body style="margin:0px;"><object data="' +this.addForm.fileData +'" type="application/pdf" width="100%" height="100%"><iframe src="' +this.addForm.fileData +'" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>');},//点击确定按钮上传到后台submitAddForm(){var formData = new FormData();formData.append('uploadPdf', this.addForm.file);this.$commonAjax.postFile('/xxx/xxx', formData,(json)=> {if (json.code == 0) {this.$message.success("文件上传成功");} else {this.$message.error("文件上传失败");}},(error)=> {this.$message.error("系统繁忙请稍后再试!");});},},mounted() {},created(){}
}

预览

准备工作需要先安装vue-pdf依赖

npm install --save vue-pdf

<pdf:src="pdfUrl":page="currentPage"@num-pages="pageCount=$event"@page-loaded="currentPage=$event"@loaded="loadPdfHandler">
</pdf><el-button type="primary" @click="changePdfPage(0)" icon="el-icon-back">上一页</el-button>
<el-button type="primary">{{currentPage}} / {{pageCount}}</el-button>
<el-button type="primary" @click="changePdfPage(1)" icon="el-icon-right">下一页</el-button>
<el-button type="primary" @click="downloadFile()" icon="el-icon-download">下载</el-button>

import pdf from 'vue-pdf';
export default {components: {pdf},data() {return {currentPage: 0, // pdf文件页码pageCount: 0, // pdf文件总页数fileType: 'pdf', // 文件类型pdfUrl: '', // pdf文件地址}},methods:{//预览PDF翻页方法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 // 加载的时候先加载第一页},//初始化pdf路径initPdf(){//这里的PDF路径就是上传到后台的路径this.downloadFileUrl = 'http://xxx.xxx.xxx.xxx/file.pdf';this.pdfUrl = 'http://xxx.xxx.xxx.xxx/file.pdf';},},mounted() {this.initPdf();},created(){}
}

下载

downloadFile(){window.location.href = "http://xxx.xxx.xxx.xxx/downloadFile?token=xxx&path=" + this.downloadFileUrl;this.$message.success('下载成功！');
}

VUE PDF上传预览下载（vue-pdf）相关推荐

vue实战--vue+elementUI实现多文件上传+预览（word/PDF/图片/docx/doc/xlxs/txt）
需求最近在做vue2.0+element UI的项目中遇到了一个需求:需求是多个文件上传的同时实现文件的在线预览功能.需求图如下: 看到这个需求的时候,小栗脑袋一炸.并不知道该如何下手,之前的实践项 ...
钉钉小程序上传预览下载word，pdf文档等一系列问题
钉钉小程序上传预览下载word,pdf文档等一系列问题小程序"用完即走"的理念使得有着很好的发展市场,不仅微信小程序,支付宝,钉钉小程序等都受用户的喜爱. 刚接触了一个企业内部应 ...
vue图片上传预览功能
效果图 html结构 <ul class="gallery-window-map" style="flex-wrap:wrap;"><!--点 ...
pdf.js —— 在线预览下载打印pdf文件插件，实现的两种方式
ViewerJS简介 ViewerJS的繁重工作是由这些令人敬畏的项目完成的: PDF.js(由Mozilla提供) WebODF(由KO GmbH提供) 运行ViewerJS就像创建链接一样简单.您 ...
pdf.js——在线预览下载打印pdf文件插件
html页面使用下载PDF.js, http://mozilla.github.io/pdf.js/getting_started/#download 将 pdfjs 文件夹放到项目static ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
flash 图片剪切 php,flash + php头像上传预览裁剪组件1.8发_php
安装及部署: 1. 上传到 apache,iis,Tomcat 服务器,通过域名访问 index.html v1.8 1.优化摄像头拍照不清晰(目前支持高清) v1.7 http://www.gaod ...
html 手机qq图片预览,模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

VUE PDF上传预览下载（vue-pdf）

上传

预览

下载

VUE PDF上传预览下载（vue-pdf）相关推荐

最新文章

热门文章