vue3 pdf、word等文件下载

 效果：

 

      <div class="byLawBox"><div class="titleBox">规章制度公示</div><div class="contentBox"><TableList:loading="byLawloading"ref="byLawtablistRef":hasImport="false":hasExport="false"@getData="byLawgetData":columns="byLawcolumns":showHeader="false":MaxResultCount="10":ischange="false"><template #customtable="{ column, record }"><template v-if="column.key === 'icon'"><file-word-outlinedstyle="color: #1683ff"v-if="findFileType(record.FilePath[0]?.DisPlayName) == '.doc' ||findFileType(record.FilePath[0]?.DisPlayName) == '.docx'" /><file-ppt-outlinedstyle="color: #f57b11"v-if="findFileType(record.FilePath[0]?.DisPlayName) == '.ppt' ||findFileType(record.FilePath[0]?.DisPlayName) == '.pptx'" /><file-excel-outlinedstyle="color: #15c34f"v-if="findFileType(record.FilePath[0]?.DisPlayName) == '.xlsx' ||findFileType(record.FilePath[0]?.DisPlayName) == '.xLs'" /><file-pdf-outlinedstyle="color: #e83c35"v-if="findFileType(record.FilePath[0]?.DisPlayName) == '.pdf'"/></template></template><template #operation="{ column, record }"><a @click="preview(record)"> 预览</a><a-divider type="vertical" /><a @click="downLoadEvent(record)"> 下载</a></template></TableList></div></div>
const downLoadEvent = (param2) => {//下载操作if (Array.isArray(param2.FilePath) &&param2?.FilePath?.length &&param2?.FilePath[0]?.FileId) {axios.get(window.defaultconfig.fileUrl +"/api/FileManage/Download" +`?Id=${param2.FilePath[0].FileId}`,{ responseType: "arraybuffer" }).then((res) => {const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });const objectUrl = URL.createObjectURL(blob);const a = document.createElement("a");a.download = param2.FilePath[0].DisPlayName;a.href = objectUrl;document.body.appendChild(a);a.click();document.body.removeChild(a);}).catch((error) => {message.error("系统异常，请联系管理员");});} else {message.error("文件不存在，无法下载");}
};

 

const byLawcolumns = [{title: "图标",dataIndex: "icon",key: "icon",align: "right",width: 20,},{title: "文件名",dataIndex: "FilePath",ellipsis: true,key: "FilePath",align: "left",customRender: ({ text }) => text[0].DisPlayName,},{title: "操作",dataIndex: "operation",key: "operation",align: "right",width: 100,},
];

table组件

<template><div class="tableBox"><div class="btn-add"><a-space><a-uploadv-model:file-list="fileList"v-if="hasImport"name="file"accept=".xls,.xlsx"action="":headers="headers"@change="handleChange"><a-button type="primary"> 导入 </a-button></a-upload><a-button type="primary" v-if="hasExport" @click="handleAllExport">导出全部</a-button><a-button type="primary" v-if="allDel">全部删除</a-button><a-button:disabled="dataSource.length === 0 || flagselectedRowKeys"v-if="rowSelection"@click="delEvent(selecrowdata, 'many')">批量删除</a-button><a-button:disabled="dataSource.length === 0 || flagselectedRowKeys"v-if="rowSelectionEdit"@click="manyEditEvent(selecrowdata, 'many')">批量修改</a-button><a-button:disabled="dataSource.length === 0 || flagselectedRowKeys"v-if="markread"@click="handleFlagRead(selecrowdata, 'hasread')">标记已读</a-button><a-buttontype="primary"v-if="operatingButton?.addbtn"@click="editEvent('add')">{{ addbtnName ? addbtnName : "添加" }}</a-button><a-button:disabled="dataSource.length === 0"type="primary"v-if="operatingButton?.export"@click="exportEvent('export')">{{ "新建导出" }}</a-button><a-buttontype="primary"v-if="operatingButton?.exportRecord"@click="exportEvent('exportRecord')">{{ "导出记录" }}</a-button><a-button type="primary" v-if="hasgoback" @click="handlegoback">返回</a-button></a-space></div><a-table:rowKey="row => row.id?row.id:row.Id":showHeader="showHeader":dataSource="dataSource":columns="columns":loading="loading":scroll="{ x: tableOtherobj.scroll }":expandIconColumnIndex="expandIconSet.expandIconColumnIndex":expandIconAsCell="expandIconSet.expandIconAsCell"@expand="handleexpand"@expandedRowsChange="expandedRowsChange":row-selection="rowSelection || markread || rowSelection2||rowSelectionEdit? {selectedRowKeys:selecrowdata, ...objrowSelection }: null":pagination="pagination ? objArray.pagination : false"><template #bodyCell="{ column, record, index }"><slot name="customtable" :column="column" :record="record"></slot><template v-if="column.key === 'operation'"><span><slot name="operation" :column="column" :record="record"></slot><a@click="editEvent('download', record)"v-if="operatingButton?.reportdownload">报表下载</a><a-divider type="vertical" v-if="dividerbutton?.reportdownload" /><a@click="editEvent('detail', record)"v-if="operatingButton?.detail">查看</a><a-divider type="vertical" v-if="dividerbutton?.detail" /><slot name="editOperation" :column="column" :record="record"><a @click="editEvent('edit', record)" v-if="operatingButton?.edit">修改</a></slot><a-divider type="vertical" v-if="dividerbutton?.edit" /><a@click="delEvent(record)"v-if="operatingButton?.del"style="color: red">删除</a><a-divider type="vertical" v-if="dividerbutton?.del" /></span></template><template v-if="column.key === 'index'"><span>{{`${(objArray.pagination.current - 1) * objArray.pagination.pageSize +index +1}`}}</span></template><template v-if="column.key === objType.typeName && objType.isshow"><span class="blockBox" v-if="objType[record[objType.typeName]]":style="{borderColor:objTypecolor.isshow? objTypecolor[record[objType.typeName]]: '#fff',color: objTypecolor.isshow? objTypecolor[record[objType.typeName]]: null,backgroundColor:objTypeBgcolor.isshow? objTypeBgcolor[record[objType.typeName]]: null,}">{{ objType[record[objType.typeName]] }}</span><!-- marginLeft:objType.marginLeft?objType.marginLeft:'',marginRight:objType.marginRight?objType.marginRight:'' --><span :style="{color:`#FF0000`,color:!objType[record[objType.typeName]]?'#999':''}" v-else>{{objType[record[objType.typeName]]?  objType[record[objType.typeName]]:'暂无数据'}}</span></template><template v-if="column.key === obj2Type?.typeName && obj2Type?.isshow"><span>{{ obj2Type[record[obj2Type.typeName]] }}</span></template></template></a-table></div>
</template>
<script setup>
import { reactive, ref, watch, toRefs } from "vue";const props = defineProps({editColor:{type: Boolean,default: false,},ischange:{type: Boolean,default: true,},// 请求最大条数MaxResultCount: {type: Number,default: 0,},// 是否显示表头showHeader: {type: Boolean,default: true,},addbtnName: {type: String,default: "",},editTxt:{type: String,default: "修改",},operatingButton: {//操作按钮reportdownload: {type: Boolean,default: false,},edit: {type: Boolean,default: true,},del: {type: Boolean,default: true,},detail: {type: Boolean,default: false,},},dividerbutton: {//操作按钮之间的分割线reportdownload: {type: Boolean,default: false,},edit: {type: Boolean,default: true,},del: {type: Boolean,default: false,},detail: {type: Boolean,default: false,},},allDel: {//按钮：全部删除type: Boolean,default: false,},columns: {//表格表头type: Array,default: [],},formessagedivider: {type: Boolean,default: false,},hasImport: {//按钮：导入type: Boolean,default: false,},hasExport: {//按钮：导出type: Boolean,default: false,},markread: {// 按钮：标记已读type: Boolean,default: false,},hasDetail: {//表格详情type: Boolean,default: false,},tableOtherobj: {type: Object,default: {// hasAddbtn: true,// 表格上是否有添加按钮// hasDetail: false,//操作中是否有详情scroll: false, //表格是否有横向滚动，以及x,方向的 值是多少  numberactionwidth: "120",},},hasedit: {//表格修改type: Boolean,default: true,},hasdel: {//表格删除type: Boolean,default: true,},hasseeprocess: {//表格查看过程type: Boolean,default: false,},pagination: {//分页type: Boolean,default: true,},// 是否有批量操作rowSelection: {type: Boolean,default: false,},rowSelectionEdit: {type: Boolean,default: false,},rowSelection2: {// 是否可以选择type: Boolean,default: false,},hasgoback: {//返回按钮type: Boolean,default: false,},searchkey: {// 查询的字段type: Object,default: {},},objType: {//后台返回摸个字段，不能直接显示，而是根据不同值显示对应的其他内容type: Object,default: {isshow: false, //是否显示typeName: "type", // 属性值 '需要转义的表格字段,当type=1时显示公司级；当typ=2时显示部门级'1: "公司级",2: "部门级",},},obj2Type: {//页面需要两个字段都用枚举时type: Object,default: {isshow: false, //是否显示typeName: "type", // 属性值 '需要转义的表格字段,当type=1时显示公司级；当typ=2时显示部门级'1: "公司级",2: "部门级",},},objTypecolor: {type: Object,default: {isshow: false, //是否显示typeName: "monitorDataReportType", // 属性值 '需要设置颜色的字段'day: "#FF0000",month: "#FFFF00",},},objTypeBgcolor: {type: Object,default: {isshow: false, //是否显示typeName: "monitorDataReportType", // 属性值 '需要设置颜色的字段'day: "#FF0000",month: "#FFFF00",},},expandIconSet: {// 表格嵌套时，那个控制的展开折叠图表的位置type: Object,default: {expandIconColumnIndex: 2, //想让展开图标放在第几列expandIconAsCell: false, 想让展开图标放在第几列 设置的配套属性},},loading: false, //表格loading
});
const {objTypecolor,obj2Type,operatingButton,dividerbutton,formessagedivider,markread,columns,hasImport,hasExport,hasDetail,tableOtherobj,hasedit,hasdel,hasseeprocess,pagination,rowSelection,rowSelectionEdit,hasgoback,searchkey,objType,expandIconSet,
} = toRefs(props);// 发送给父组件的方法
const emits = defineEmits(["openModel","handleDelTable","getData","FlagRead","handleTableRowSelec","exportXlsx","importXlsx",
]);// 批量删除
let flagselectedRowKeys = ref(true);
let selecrowdata = ref();
const objrowSelection = {// selectedRowKeys: selectedRowKeys,//selectedRowKeys 选中行的datasource 中元素key的值； selectedRows为所选元素中datasource 是一个数组。onChange: (selectedRowKeys, selectedRows) => {let falg = selectedRowKeys.length ? false : true;flagselectedRowKeys.value = falg;selecrowdata.value = [...selectedRowKeys];// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);emits("handleTableRowSelec", selectedRowKeys, selectedRows);},
};// 返回
const handlegoback = () => {history.back();
};
// 操作
const editEvent = (param1, param2) => {emits("openModel", param1, param2);
};
//导出操作
const exportEvent = (param1) => {emits("exportEvent", param1);
};
const delEvent = (param1, param2) => {emits("handleDelTable", param1);
};
const manyEditEvent=(param1, param2)=>{
emits("handleEditTable", param1,selecrowdata.value);
}
const handleFlagRead = () => {emits("FlagRead", selecrowdata);
};
// 分页方法
let objArray = reactive({// 请求参数searchParams: {},// 分页信息pagination: {current: 1,total: 0,pageSize: props.MaxResultCount ? props.MaxResultCount : 25,showSizeChanger: props.ischange,showTotal: (total) => `共 ${total} 条`,pageSizeOptions: [ "15", "20", "25", "30", "40"],onChange: (page, pageSize) => {handleSizeChange(page, pageSize);},},// 批量选中selectedRowKeys: [],// 选中的行数据selectedRows: [],
});const handleSizeChange = (page, pageSize) => {if (objArray.pagination.pageSize != pageSize) {objArray.pagination.current = 1;objArray.pagination.pageSize = pageSize;} else {objArray.pagination.current = page;}emits("getData", props.searchkey, objArray.pagination);
};
// 嵌套子表格
const handleexpand = (expanded, record) => {console.log(expanded, record, "expanded, record");
};
const expandedRowsChange = (expandedRows) => {console.log(expandedRows, "expandedRows");
};// 导出全部
const handleAllExport = () => {emits("exportXlsx");
};
// 导入
const headers = {authorization: "authorization-text",
};
const fileList = ref([]);
const handleChange = (info) => {if (info.file.status !== "uploading") {console.log(info.file, info.fileList);}if (info.file.status === "done") {message.success(`${info.file.name} file uploaded successfully`);} else if (info.file.status === "error") {message.error(`${info.file.name} file upload failed.`);}emits("importXlsx", info);
};
const handleImportant = () => {};
const dataSource = ref([]);
const getData = (data, total) => {dataSource.value = data;objArray.pagination.total = total;
};
const setpage = (pageojb) => {objArray.pagination.current = pageojb.current;objArray.pagination.pageSize = pageojb.pageSize;
};
defineExpose({ getData, setpage,selecrowdata });
</script>
<style lang="less" scoped>
.btn-add {text-align: right;/* margin-bottom: 20px; *//* margin-top: 20px; */
}:deep(.ant-select-single:not(.ant-select-customize-input)) {.ant-select-selector {height: 24px !important;}
}:deep(.ant-select-single) {.ant-select-selector {.ant-select-selection-item {line-height: 22px !important;}}
}
.blockBox{padding: 0px 5px;// margin:0px 33px;border: 1px solid;border-radius: 3px;font-size: 14px;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/48993.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于Vue的3D饼图

基于Vue的3D饼图

先看效果&#xff1a; 再看代码&#xff1a; <template><div class"container"><div style"height: 100%;width: 100%;" id"bingtu3D"></div></div></template> <script> import "echarts-liqu…
阅读更多...
springboot日志文件名称为什么叫logback-spring.xml

springboot日志文件名称为什么叫logback-spring.xml

如题&#xff0c;为什么springboot日志配置文件叫logback-spring.xml&#xff1f; 在整个项目中搜索 logback-spring.xml 并没有搜索到。 先看一下 org.springframework.boot.context.logging.LoggingApplicationListener#initialize protected void initialize(ConfigurableEn…
阅读更多...
亚信科技AntDB数据库通过GB 18030-2022最高实现级别认证，荣膺首批通过该认证的产品之列

亚信科技AntDB数据库通过GB 18030-2022最高实现级别认证，荣膺首批通过该认证的产品之列

近日&#xff0c;亚信科技AntDB数据库通过GB 18030-2022《信息技术 中文编码字符集》最高实现级别&#xff08;级别3&#xff09;检测认证&#xff0c;成为首批通过该认证的数据库产品之一。 图1&#xff1a;AntDB通过GB 18030-2022最高实现级别认证 GB 18030《信息技术 中文编…
阅读更多...
【PostgreSQL】导出数据库表(或序列)的结构和数据

【PostgreSQL】导出数据库表(或序列)的结构和数据

导出 PostgreSQL 数据库的结构和数据 要导出 PostgreSQL 数据库的结构和数据&#xff0c;你可以使用 pg_dump 命令行工具。pg_dump 可以生成一个 SQL 脚本文件&#xff0c;其中包含了数据库的结构&#xff08;表、索引、视图等&#xff09;以及数据。下面是如何使用 pg_dump 导…
阅读更多...
vs2017实现linux远程编译报错“CMake 缺少以下功能:serverMode“解决方案

vs2017实现linux远程编译报错“CMake 缺少以下功能:serverMode“解决方案

背景 window系统vs2017使用cmake实现linux远程调试和编译时&#xff0c;搭建的环境报CMake 缺少以下功能:“serverMode”。请参阅 https://aka.ms/linuxcmakeconfig 了解详细信息错误&#xff0c;如何解决&#xff1f;经排查&#xff0c;发现远程开发环境的cmake版本不支持ser…
阅读更多...
前端-Sass和Less区别

前端-Sass和Less区别

Less和Sass都是CSS预处理器&#xff0c;它们提供了更强大、更灵活的方式来编写CSS样式。以下是Less和Sass之间的一些区别&#xff1a; 语法&#xff1a;Less使用类似于CSS的语法&#xff0c;而Sass使用类似于Ruby的语法。Less使用大括号 {} 和分号 ; 来表示代码块和语句&#x…
阅读更多...
c语言面向对象开发

c语言面向对象开发

继承和多态是c的灵魂&#xff0c;如何使用c语言模拟这一机制&#xff0c;是使用c语言实现面向对象开发的关键。 一. 不存在继承 /* class TestClass { private:int a;int b; public:void func0(int param0,int param1);void func1(int param2,int param3); }; */ str…
阅读更多...
R语言11-R语言中的条件结构

R语言11-R语言中的条件结构

if语句&#xff1a; if 语句用于在条件为真时执行一段代码块。 x <- 10 if (x > 5) {print("x is greater than 5") }if-else语句&#xff1a; if-else 语句允许您在条件为真和条件为假时执行不同的代码块。 x <- 3 if (x > 5) {print("x is grea…
阅读更多...
问题描述:在Windows下没有预装ImageMagick工具

问题描述:在Windows下没有预装ImageMagick工具

问题描述:在Windows下没有预装ImageMagick工具 # WInR输入cmd回车进入命令行,执行以下命令查看版本信息 magick --version没有预装ImageMagick工具 解决方案&#xff1a;下载安装ImageMagick 官网下载:ImageMagick-7.1.1-15-Q16-x64-dll.exe 下载之后&#xff0c;一路下一步…
阅读更多...
WPS右键新建没有docx pptx xlsx 修复

WPS右键新建没有docx pptx xlsx 修复

解决wps右键没有新建文档的问题 右键没有新建PPT和Excel 1 wps自带的修复直接修复没有用 以上不管咋修复都没用 2 先编辑注册表 找到 HKEY_CLASSES_ROOT CTRLF搜文件扩展名 pptx docx xlsx 新建字符串 三种扩展名都一样操作 注册表编辑之后再次使用wps修复 注册组件&am…
阅读更多...
【从零学习python 】64. Python正则表达式中re.compile方法的使用详解

【从零学习python 】64. Python正则表达式中re.compile方法的使用详解

文章目录 re.compile方法的使用进阶案例 re.compile方法的使用 在使用正则表达式时&#xff0c;我们可以直接调用re模块的match、search、findall等方法&#xff0c;并传入指定的正则表达式进行匹配。另外&#xff0c;我们还可以使用re.compile方法生成一个正则表达式对象&…
阅读更多...
畜牧兽医虚拟仿真｜病禽解剖VR模拟操作演练系统

畜牧兽医虚拟仿真｜病禽解剖VR模拟操作演练系统

在生物学课程中&#xff0c;动物解剖是一个重要的组成部分&#xff0c;它能够帮助学生了解动物的生理结构、功能和生活习性&#xff0c;从而更好地认识和保护自然界的生物多样性。然而&#xff0c;传统的动物解剖教学方法往往局限于课堂教学和实验室实践&#xff0c;学生很难真…
阅读更多...
8.22笔记

8.22笔记

8.22笔记 8.22笔记一、Hive的HQL语法重点问题1.1 DDL1.1.1 Hive中数据表的分类问题1.1.2 特殊的数据类型 1.2 DML1.3 DQL1.3.1 查询语法和MySQL大部分都是一致的 1.4 讲了三个数据库的可视化工具1.4.1 navicat1.4.2 dbeaver1.4.3 chat2db 二、Hive中重点问题&#xff1a;Hive函…
阅读更多...
【golang】接口类型（interface）使用和原理

【golang】接口类型（interface）使用和原理

接口类型的类型字面量与结构体类型的看起来有些相似&#xff0c;它们都用花括号包裹一些核心信息。只不过&#xff0c;结构体类型包裹的是它的字段声明&#xff0c;而接口类型包裹的是它的方法定义。 接口类型声明中的这些方法所代表的就是该接口的方法集合。一个接口的方法集…
阅读更多...
CSS行内，内部，外部以及优先级

CSS行内，内部，外部以及优先级

1.内联样式表&#xff1a; 将样式编写到style标签里 <style>.context {color: red;} </style> 2. 行内样式&#xff1a; 在 HTML 标签中使用 style 属性设置 CSS 样式 <div style"font-size: 18px;">行内样式</div> 3.外联样式&#xff1…
阅读更多...
【数据结构】吃透单链表！！！（详细解析~）

【数据结构】吃透单链表！！！（详细解析~）

目录 前言&#xff1a;一.顺序表的缺陷 && 介绍链表1.顺序表的缺陷2.介绍链表&#xff08;1&#xff09;链表的概念&#xff08;2&#xff09;链表的结构&#xff08;3&#xff09;链表的功能 二.单链表的实现1.创建节点的结构2.头文件函数的声明3.函数的实现&#xff…
阅读更多...
iPhone开启“轻点唤醒”功能但点击屏幕无反应怎么解决？

iPhone开启“轻点唤醒”功能但点击屏幕无反应怎么解决？

iPhone的“轻点唤醒”功能启用时&#xff0c;用户只需手指轻触或点击手机屏幕即可快速唤醒设备&#xff0c;无需按压任何按钮。然而&#xff0c;有些用户在使用“轻点唤醒”功能唤醒屏幕时&#xff0c;遇到该功能失灵&#xff0c;无法正常唤醒屏幕的情况&#xff0c;这是怎么回…
阅读更多...
Windows系统搭建Gitblit服务器

Windows系统搭建Gitblit服务器

目录 介绍安装Java环境配置环境变量 下载Gitbilt配置Gitbilt 介绍 GitBlit是一个用于搭建和管理Git服务器的开源工具。它是使用Java语言编写的&#xff0c;并且需要Java环境来运行。 1、跨平台性&#xff1a;Java是一种具有跨平台性的编程语言&#xff0c;可以在多个操作系统…
阅读更多...
读取xml

读取xml

将json文件读取成字符串 public static String getJsonStr(File jsonFile){try {FileReader fileReader new FileReader(jsonFile);Reader reader new InputStreamReader(new FileInputStream(jsonFile),"utf-8");int ch 0;StringBuffer sb new StringBuffer();…
阅读更多...
【工具】VirtualBox虚拟机安装Windows操作系统

【工具】VirtualBox虚拟机安装Windows操作系统

前面的文章中介绍了VirtualBox虚拟机的安装，VirtualBox虚拟机中如何安装操作系统，是本文的重点，下面将进行详细介绍。 使用VirtualBox虚拟机安装Windows操作系统有很多好处，主要包括以下几点： 节省资源：通过虚拟化技术，一台物理计算机可以同时运行多个虚拟机，每个虚拟…
阅读更多...
最新文章

Copyright @ 2022~2023