vue自定义组件实现文件列表预览与下载

由于ant-design-vue自带的a-upload组件与JeecgBoot封装的j-upload组件在查看上传文件列表时都不太满足项目需要，就自定义了文件列表查看组件，主要仿a-upload组件list-type="picture-card"样式设计，封装了在线预览（仅实现了图片与pdf文件的预览功能）和下载功能。

1.首先安装vue-pdf插件用于预览pdf

npm install --save vue-pdf

2.组件FileList.vue代码如下放置在src/components/FileList

<template><div><a-row :gutter="16"><a-col :span="8" v-for="(item,i) in fileList"><div class="upload-item"><span class="file-type" :style="getFileTypeIcon(item)"></span><div class="master"><a-space class="operator"><a @click="handlePreview(item)" alt="查看文件" class=""><a-icon type="eye" /></a><a @click="handleDownload(item)" alt="下载文件" ><a-icon type="download" /></a></a-space></div></div></a-col></a-row><!--图片预览  by cuizhiyun --20220225--><a-modal :visible="previewVisible" @cancel="handleCancel" @ok="handleCancel"><img :alt="fileName" style="width: 100%" :src="previewImage" /></a-modal><a-modal width="1000px" :visible="previewPdfVisible" @cancel="handlePdfCancel" @ok="handlePdfCancel"><pdfref="pdf"v-for="i in pdfNumPages":key="i":page="i":src="previewPdf"></pdf></a-modal><!--图片预览 end  by cuizhiyun --20220225--></div>
</template><script>
import pdf from 'vue-pdf';
export default {name: 'FileList',components: {pdf},data() {return {previewVisible: false,previewImage:'',fileName:'',previewPdfVisible:false,previewPdf:'',pdfNumPages: null, // pdf 总页数}},props: {fileList: {type: Array,required: false,default: []},},methods:{handleCancel(){this.previewVisible = false;},handlePdfCancel(){this.previewPdfVisible = false;},//查看文件handlePreview(fileName){let fileUrl=process.env.VUE_APP_API_BASE_URL + "/sys/common/static/"+fileName;console.log(fileUrl);let suffix=this.getSuffix(fileName);if(['jpg','gif','png','jpeg','bmp','webp'].indexOf(suffix)!=-1){//图片预览this.previewVisible=true;this.fileName=fileName;this.previewImage=fileUrl;}else if(['pdf'].indexOf(suffix)!=-1){this.previewPdfVisible=true;this.previewPdf=fileUrl;//计算pdf页码总数let loadingTask = pdf.createLoadingTask(this.previewPdf)loadingTask.promise.then(pdf => {this.pdfNumPages = pdf.numPages}).catch(err => {this.$message.error('pdf 加载失败:'+ err);})}else{//非图片打开新窗口location.href = fileUrl;//window.open(fileUrl,'_blank');}},//下载文件handleDownload(file){location.href=process.env.VUE_APP_API_BASE_URL + "/sys/common/static/"+file;},getSuffix(fileName){return fileName.substring(fileName.indexOf('.')+1);},getFileTypeIcon(fileName){let suffix=this.getSuffix(fileName);let fileType='txt';if(['jpg','gif','png','jpeg','bmp','webp'].indexOf(suffix)!=-1){fileType='pic';}else if(['doc','docx'].indexOf(suffix)!=-1){fileType='doc';}else if(['pdf'].indexOf(suffix)!=-1){fileType='pdf';}else{fileType='txt';}return 'background: url(\'/img/'+fileType+'.png\') no-repeat';},}
}
</script><style scoped>>>> .upload-item{position: relative;height: 100px;width: 100px;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;margin-bottom: 16px;}>>> .upload-item .file-type{content:'';width: 40px;height: 40px;position: absolute;left:50%;transform: translateX(-50%);}>>> .upload-item .master{display: none;height: 84px;width: 84px;margin: 0 8px 8px 0;background: #000;z-index: 1;position: absolute;opacity:0.5;}>>> .upload-item:hover .master{display: block;}>>> .upload-item .operator{width: 80px;position: absolute;left:17px;top:30px;}>>> .upload-item .operator .anticon{font-size: 20px;color: #fff;}
</style>

3.使用组件

import FileList from '@/components/FileList'export default {name: 'StartPermitApplicationForm',components: {FileList},
}

<a-col :span="12"><a-form-model-item label="银企直连授权书" :labelCol="labelCol" :wrapperCol="wrapperCol" ><file-list :fileList="bankArr"></file-list></a-form-model-item></a-col>

4.使用组件完整代码如下

<template><a-spin :spinning="confirmLoading"><j-form-container><a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail"><a-row><a-col :span="12"><a-form-model-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" ><a-input v-model="mainProjectName" placeholder="请输入项目名称" disabled style="width: 960px"></a-input></a-form-model-item></a-col></a-row><a-row><a-col :span="24"  style="display: none"><a-form-model-item label="项目id" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mainProjectId"><a-input v-model="model.mainProjectId" placeholder="请输入项目id"  ></a-input></a-form-model-item></a-col><a-col :span="12"><a-form-model-item label="合同金额" :labelCol="labelCol" :wrapperCol="wrapperCol" ><a-input-number class="t_right" v-model="contractAomunt" placeholder="请输入合同金额" :disabled="true" style="width: 100%":formatter="value => `${value}元`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')":parser="value => value.replace(/(,*)/g, '').replace('元', '')"></a-input-number></a-form-model-item></a-col><a-col :span="12"><a-form-model-item label="农工费占比" :labelCol="labelCol" :wrapperCol="wrapperCol" ><a-input class="t_right" v-model="workerCostRate" placeholder="请输入农工费占比" :disabled="true" suffix="%" ></a-input></a-form-model-item></a-col><a-col :span="12"><a-form-model-item label="银企直连授权书" :labelCol="labelCol" :wrapperCol="wrapperCol" ><file-list :fileList="bankArr"></file-list></a-form-model-item></a-col><!--<a-col :span="24"><a-form-model-item label="审批状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="approvalStatus"><a-input-number v-model="model.approvalStatus" placeholder="请输入审批状态" style="width: 100%" /></a-form-model-item></a-col><a-col :span="24"><a-form-model-item label="审批时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="approvalDate"><j-date placeholder="请选择审批时间" v-model="model.approvalDate"  style="width: 100%" /></a-form-model-item></a-col>--></a-row></a-form-model></j-form-container></a-spin>
</template><script>import { httpAction, getAction } from '@/api/manage'import { validateDuplicateValue } from '@/utils/util'import FileList from '@/components/FileList'export default {name: 'StartPermitApplicationForm',components: {FileList},props: {//表单禁用disabled: {type: Boolean,default: false,required: false}},data () {return {projectCode:'',contractAomunt:'',workerCostRate:'',workerCost:'',mainContName:'',mainProjectName:"",mainCreditCode:'',account:'',bank:'',noticeArr:[],contractArr:[],licenceArr:[],cashArr:[],bankArr:[],model:{},labelCol: {xs: { span: 24 },sm: { span: 5 },},wrapperCol: {xs: { span: 24 },sm: { span: 16 },},confirmLoading: false,validatorRules: {},url: {add: "/project/startPermitApplication/add",edit: "/project/startPermitApplication/edit",queryById: "/project/startPermitApplication/queryById",queryByProjectId:"/project/startPermitApplication/queryByProjectId",queryWinBidNoticeByProjectId:"/project/winBidNotice/queryByProjectId",queryContractByProjectId:"/project/generalContract/queryByProjectId",queryAccountByProjectId:"/project/specialAccount/queryByProjectId",}}},computed: {formDisabled(){return this.disabled},},created () {//备份model原始值this.modelDefault = JSON.parse(JSON.stringify(this.model));},methods: {initProject(project){this.model.mainProjectId = project.id;this.mainProjectName = project.mainProjectName;this.model.mainContractorId = project.mainContractorId;this.mainContName = project.mainContractorName;this.model.mainDeptId = project.mainDeptId;this.model.mainDeptName = project.mainDeptName;this.model.settlementId = project.settlementId;this.model.regionCode = project.regionCode;this.projectCode = project.mainProjectCode;getAction(this.url.queryByProjectId,{projectId:project.id}).then((res) =>{if (res.success) {//如果更新了总包项目怎么办，所以这个地方每次要最新的this.model.id=res.result.id;// this.model = Object.assign({}, res.result);}})//获取营业执照号getAction('/project/company/company/queryById',{id:project.mainContractorId}).then(response => {this.mainCreditCode = response.result.uniformSocialCreditCode;this.$forceUpdate()});//获取中标通知书信息getAction(this.url.queryWinBidNoticeByProjectId,{projectId:project.id}).then(response => {if(response.success){this.model.winBidId = response.result.id;this.noticeArr = response.result.attachment.split(',');this.$forceUpdate()}else {this.$message.error("请先上报中标通知书")this.$emit('cancel');}});//获取总包合同信息getAction(this.url.queryContractByProjectId,{projectId:project.id}).then(response => {if(response.success){this.model.generalContractId = response.result.id;this.contractAomunt = response.result.contractAmount;this.workerCostRate = response.result.workerCostProportion;this.workerCost = (Number(response.result.contractAmount) * Number(response.result.workerCostProportion) / 100).toFixed(2);this.contractArr = response.result.attachment.split(',');this.$forceUpdate()}else {this.$message.error("请先上报总包合同")this.$emit('cancel');}});//获取农民工专户信息getAction("/project/regionConfig/queryByRegionCodeAndAmount",{regionCode:project.regionCode,amount:project.contractAmount}).then((res) =>{if (res.success) {getAction(this.url.queryAccountByProjectId,{projectId:project.id}).then(response => {if(response.success){this.model.specialAccountId = response.result.id;this.account = response.result.bankAccount;this.bank = response.result.bankDeposit;this.licenceAttr = response.result.licenceAttachment;this.cashArr = response.result.cashManageAttachment.split(',');this.bankArr = response.result.bankCorporateAttachment.split(',');this.$forceUpdate()}else {this.$message.error("请先上报农民工专户")this.$emit('cancel');}});}})},add () {this.edit(this.modelDefault);},edit (record) {this.model = Object.assign({}, record);this.visible = true;},submitForm () {const that = this;// 触发表单验证this.$refs.form.validate(valid => {if (valid) {that.confirmLoading = true;let httpurl = '';let method = '';if(!this.model.id){httpurl+=this.url.add;method = 'post';}else{httpurl+=this.url.edit;method = 'put';}httpAction(httpurl,this.model,method).then((res)=>{if(res.success){that.$message.success(res.message);that.$emit('ok');}else{that.$message.warning(res.message);}}).finally(() => {that.confirmLoading = false;})}})},}}
</script>
<style scoped>
>>> .t_right{text-align: right!important;
}
>>> .t_right .ant-input-number-input{text-align: right!important;
}</style>

vue自定义组件实现文件列表预览与下载相关推荐

uniapp图片或文件的预览和下载，兼容ios+安卓+浏览器
一.前言在uniapp的APP日常开发中,我们时常遇到一些兼容性问题,正如本文所提到的图片的预览和下载.在此功能的开发中,我常遇到以下四个问题: 图片预览功能实现,但是PDF,word,xls文件无 ...
vue docx-preview实现docx文件在线预览
之前一般做项目进行文件浏览的时候基本都是用的window.open+url的形式打开文件,进行浏览操作的,但是这种打开方式只能够在线浏览如jpg.png.pdf这类文件,对于文档类型docx这种则是用 ...
pdf上传及预览；file上传pdf文件及预览；vue上传pdf文件及预览；vue-pdf预览pdf文件
需求:上传pdf文件,并点击可以打开预览.使用input的file功能即可完成,预览只需要跳转到pdf的url地址即可.还可以配合vue-pdf直接预览,点击看这篇. 以下代码可直接复制使用!!!有效 ...
Java 实现图片或文件在线预览及下载
效果图图片 pdf 代码 @GetMapping("/downFile")public void downFile(HttpServletResponse response, H ...
前端实现pdf文件的在线预览与下载
前言在项目中我们经常会出现各种各样的法律文件.免责说明等文件需要用户阅读,很多文件除了阅读外还要支持用户下载.为了快速开发,一些变动不大的文件,或者是项目中不想开发富文本的时候我们可以选择直接使用p ...
Springboot实现PDF预览、下载、读取
背景:项目中实现pdf文件的预览以及下载环境:jdk1.8.SpringBoot2.0 PDF.js下载地址将下载的源码拷入项目中修改viewer.js: 将defaultUrl: {value: ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
html如何找寻vue文件,如何预览vue文件
每天写个页面,都要配置脚手架,能不能像以前开发前端页面一样,写一个index.html,然后编写js,css,就可以在浏览器上运行了呢?可是我又不想舍弃vue,那么能不能全局搭建一个脚手架,供我来使用 ...
php+预览和下载pdf文件,vue实现在线预览pdf文件和下载（pdf.js）
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件, ...

vue自定义组件实现文件列表预览与下载

vue自定义组件实现文件列表预览与下载相关推荐

最新文章

热门文章