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>