网站评论 设计,wordpress自定义分类面包屑导航,网页在线秒收录,东营网站的优化目录
一、需求背景
二、落地实现
1.文件上传
图片示例
HTML代码
业务代码
2.文件下载
图片示例
方式一#xff1a;代码
方式二#xff1a;代码
3.文件预览
图片示例
方式一#xff1a;代码
方式二#xff1a;代码 一、需求背景 在一个愉快的年后#xff…目录
一、需求背景
二、落地实现
1.文件上传
图片示例
HTML代码
业务代码
2.文件下载
图片示例
方式一代码
方式二代码
3.文件预览
图片示例
方式一代码
方式二代码 一、需求背景 在一个愉快的年后需求经理提出需要完成对单个Excel文件的上传、下载、预览的功能对于一个没写过下载和预览的后端来说真的十分痛苦经过不断百度努力看别人的博客最终实现如下图所示 二、落地实现
1.文件上传
图片示例 HTML代码
templateel-upload v-modelform.upload refupload namefile action drag :on-removehandleRemove :on-successhandleSuccess multiple :limit1 accept.xls,.xlsx :before-uploadbeforeUpload :http-requesthandleRequest :on-exceedhandleExceedi classel-icon-upload stylecolor: #409eff/idiv classel-upload__tipspan stylecolor: #333333;font-size: 13px点击或将文件拖拽到这里上传/span/divdiv classel-upload__tipspan stylecolor: #999999;font-size: 13px仅支持单文件上传文件上传行数最多1000上传格式支持.xls .xlsx/span/div/el-upload
template 参数解释 namefile是传到后端时它接收这个文件的参数名叫file本人没有仔细研究因为在调接口时可个性化定制参数名后续贴的代码会提到。 action这个Element官方文档写的是一个上传的固定链接假的用不了。通常在开发中也是自定义上传逻辑所以这里置空。 drag启用拖拽上传Element默认是false直接写drag不写:dragtrue就是true了。 show-file-list显示已上传文件列表就是上传框下面的那行文件名Element默认是false multiple支持多选文件通常与limit搭配使用。 :limit1多选文件数量如只需要单个文件就设置1。 accept.xls,.xlsx接受上传的文件类型我的需求是只要Excel的。 :on-removehandleRemove文件列表移除文件时的方法就是文件列表右边那个小X触发时调用的。 :on-successhandleSuccess文件上传成功时的方法比如弹出一个上传成功提示。 :before-uploadbeforeUpload上传文件之前的方法通常用于上传文件前对文件的校验。 :http-requesthandleRequest自定义上传方式的方法比如远程调用。 :on-exceedhandleExceed文件超出个数限制时的方法比如弹出一个仅支持单个文件的提示。 classel-upload__tip这个是Element封装好的样式我的需求是需要文字在上传框里显示所以都用el-upload__tip官方文档还有个框外的用el-upload__text。 业务代码
export default {name: upload-dialog,data() {return {};},methods: {handleSuccess(response, file, fileList) {// 文件上传成功的回调this.$message.success(上传成功);},handleRemove(file, fileList) {console.log(删除, file, fileList);// 看需要是否调用删除接口},beforeUpload(file) {// 在这里进行个性化校验const maxSize 100 * 1024 * 1024; // 100MB以字节为单位if (file.size maxSize) {// 这里可以添加你的提示逻辑比如 Element UI 的 Message 警告this.$message.warning(文件大小不能超过 100 MB);return false; // 阻止上传}return true;},handleRequest(option) {// 自定义上传函数用于并发上传const formData new FormData();// 这个file就是后端的接收这个文件的参数名如果为其他则设成其他formData.append(file, option.file);// 如果还需要其他参数比如idname就在这里继续加// formData.append(id, xxx);// 发送请求这个uploadApi是import进来的自己写uploadApi(formData).then(res {// 自定义上传方法的话需要手动触发文件上传成功的钩子不然文件状态会一直处于readyoption.onSuccess(null, option.file);}).catch(error {// 自定义上传方法的话需要手动触发文件上传失败的钩子不然文件状态会一直处于readyoption.onError(error, option.file, null);});},// 文件超出个数限制时的钩子handleExceed(files, fileList) {this.$message.warning(仅支持单个文件上传);},},
};
2.文件下载
图片示例 我是通过a/a标签去实现文件下载的如果想通过点击按钮实现那么在按钮里面套塞a/a即可 方式一代码
templatea :hreffileUrl download文件/a
/template
export default {data() {return {fileUlr: www.aaa.com/test.txt};},
} 这个href放是一个像www.aaa.com/test.txt这样的cdn文件地址点击就可以直接下载到本地。 如果需要通过二进制流、Blob对象实现的话则自定义按钮触发方法去调用。详情请看方式二 方式二代码
templateel-button typetext clickdownloadFile(fileName)span stylecolor: #0000FF文件名/span/el-button
/template
export default {data() {return {};},methods: {downloadFile(fileName) {// 生成随机数据示例5行3列const data [[Name, Age, Join Date], // 表头...Array.from({length: 5}, (_, i) [User ${i 1}, // 姓名Math.floor(Math.random() * 30 20), // 随机年龄 (20-50)new Date().toISOString().split(T)[0], // 当前日期]),];// 创建工作表const worksheet XLSX.utils.aoa_to_sheet(data);// 创建工作簿const workbook XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, Sheet1);// 生成 Excel 文件const excelBuffer XLSX.write(workbook, {bookType: xlsx,type: array,});const blob new Blob([excelBuffer], {type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,});// 创建一个链接元素const link document.createElement(a);link.href URL.createObjectURL(blob);link.download fileName; // 设置下载的文件名// 触发下载link.click();// 释放 URL 对象URL.revokeObjectURL(link.href);this.$message.success(文件下载成功);},}
}
3.文件预览
图片示例 我的需求是点击文件名浏览器新打开一个标签页展示文件内容。 这个需要在route中额外添加一个路由映射 {path: /preview,name: preview,meta: { title: 文件预览, requiresAuth: false },component: () import(/views/preview.vue)
}, 还需要额外结合vue-office/excel写页面 npm install vue-office/excel vue-demi
方式一代码
入口代码
templateel-button typetexta :href#/preview?fileUrlfileUrl target_blank详情/a/el-button
/template
export default {data() {return {fileUlr: www.aaa.com/test.txt};},
} 页面代码
templatevue-office-excel :srcexcel renderedrendered errorerrorHandler/
/template
script
//引入VueOfficeExcel组件
import VueOfficeExcel from vue-office/excel;
//引入相关样式
import vue-office/excel/lib/index.css;
//引入解析Excel文件组件
import XLSX from xlsx;export default {components: {VueOfficeExcel,},data() {return {// 设置文档地址支持三种格式// string Excel文件的网络地址如cdn地址// ArrayBuffer以ArrayBuffer格式读取Excel文件的内容// Blob以Blob格式读取Excel文件的内容excel: ,};},mounted() {this.getExcel();},methods: {rendered() {console.log(渲染完成);},errorHandler() {console.log(渲染失败);},getExcel() {this.excel this.$route.query.fileUrl;}},
};
/script 这样直接就是浏览器新打开一个标签页展示文件内容。与文件下载十分相似。 如果需要使用二进制流、Blob对象打开的话。详情请看方式二 方式二代码
入口代码
templateel-button typetexta :href#/preview target_blank详情/a/el-button
/template
页面代码
templatevue-office-excel :srcexcel renderedrendered errorerrorHandler/
/template
script
//引入VueOfficeExcel组件
import VueOfficeExcel from vue-office/excel;
//引入相关样式
import vue-office/excel/lib/index.css;
//引入解析Excel文件组件
import XLSX from xlsx;export default {components: {VueOfficeExcel,},data() {return {// 设置文档地址支持三种格式// string Excel文件的网络地址如cdn地址// ArrayBuffer以ArrayBuffer格式读取Excel文件的内容// Blob以Blob格式读取Excel文件的内容excel: ,};},mounted() {this.createRandomExcel();},methods: {rendered() {console.log(渲染完成);},errorHandler() {console.log(渲染失败);},// 创建随机 Excel 文件createRandomExcel() {// 生成随机数据示例5行3列const data [[Name, Age, Join Date], // 表头...Array.from({length: 5}, (_, i) [User ${i 1}, // 姓名Math.floor(Math.random() * 30 20), // 随机年龄 (20-50)new Date().toISOString().split(T)[0], // 当前日期]),];// 创建工作表const worksheet XLSX.utils.aoa_to_sheet(data);// 创建工作簿const workbook XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, Sheet1);// 生成 Excel 文件const excelBuffer XLSX.write(workbook, {bookType: xlsx,type: array,});const blob new Blob([excelBuffer], {type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,});this.excel blob;},},
};
/script上述代码也适用于展示Word和PPT文件修改对应的格式即可。
