vue3 pdf、word等文件下载

news2024/12/23 11:01:28

 效果:

 

      <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-outlined
                  style="color: #1683ff"
                  v-if="
                    findFileType(record.FilePath[0]?.DisPlayName) == '.doc' ||
                    findFileType(record.FilePath[0]?.DisPlayName) == '.docx'
                  " />
                <file-ppt-outlined
                  style="color: #f57b11"
                  v-if="
                    findFileType(record.FilePath[0]?.DisPlayName) == '.ppt' ||
                    findFileType(record.FilePath[0]?.DisPlayName) == '.pptx'
                  " />
                <file-excel-outlined
                  style="color: #15c34f"
                  v-if="
                    findFileType(record.FilePath[0]?.DisPlayName) == '.xlsx' ||
                    findFileType(record.FilePath[0]?.DisPlayName) == '.xLs'
                  " />
                <file-pdf-outlined
                  style="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-upload
          v-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-button
          type="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-button
          type="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,方向的 值是多少  number
      actionwidth: "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.coloradmin.cn/o/912209.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Unity - 特殊文件夹

地址记录&#xff1a;https://www.cnblogs.com/zouqiang/p/6841399.html Assets Assets文件夹是unity项目中放置游戏资源的主文件夹。 该文件夹中的内容将直接反应在编辑器的Project视口中。许多系统API基于该文件夹路径。 Resources Unity允许你按需动态加载游戏资源到场景中…

ubuntu 对多CPU统一设置高性能模式

一、问题描述 之前在网上找到的CPU设置高性能模式&#xff0c;只能设置CPU0单个CPU&#xff0c;下述是对多核CPU统一设置工作模式。 二、软件安装与设置 执行下述命令sudo apt-get install indicator-cpufreq,然后重启电脑。此时&#xff0c;界面右上角会出现如下图标&#xf…

爬虫异常捕获与处理方法详解

Hey&#xff01;作为一名专业的爬虫代理供应商&#xff0c;我今天要和大家分享一些关于爬虫异常捕获与处理的方法。在进行爬虫操作时&#xff0c;我们经常会遇到各种异常情况&#xff0c;例如网络连接错误、请求超时、数据解析错误等等。这些异常情况可能会导致程序崩溃或数据丢…

威班8.19PMP考试爱心送考再出发,能量补给站为学员提供考试保障

8月19日&#xff0c;2023年的第三场PMP考试准时开考。 对于准备了个把月的学员们来说&#xff0c;这一时刻无比重要&#xff0c;为了给威班的PMP学员们考试加油打气&#xff0c;威班特地组织了送考活动&#xff0c;在考场外提前布置应援点&#xff0c;给前去参加考试的学员们带…

5.1 汇编语言:汇编语言概述

汇编语言是一种面向机器的低级语言&#xff0c;用于编写计算机程序。汇编语言与计算机机器语言非常接近&#xff0c;汇编语言程序可以使用符号、助记符等来代替机器语言的二进制码&#xff0c;但最终会被汇编器编译成计算机可执行的机器码。 相较于高级语言&#xff08;如C、P…

紧跟老板思维,这款数据可视化工具神了

在今时今日&#xff0c;依靠大数据可视化分析工具做出一张形象直观、符合企业审美的数据可视化分析报表都不是什么难事&#xff0c;难就难在于做出一张能够紧随老板思维变化展开可视化分析的数据可视化分析报表。接下来要介绍的这款数据可视化工具就是这么一款神奇的BI工具&…

整理文件轻松搞定,教你如何将文件夹里的文件进行类型归类保存

大家好&#xff01;相信大家在日常工作和学习中都会面临着大量的文件管理问题&#xff0c;如何高效地整理和保存文件成为了一大难题。幸运的是&#xff0c;不仅可以帮助你高效整理文件&#xff0c;还能实现文件的类型归类保存。 首先&#xff0c;我们要进入文件批量查询高手主…

七夕给TA满分宠爱!浪漫攻略为约会加分

浪漫的七夕将至&#xff0c;无论是异地恋人还是约会情侣&#xff0c;怎么能缺少节日仪式感~精心策划的约会计划&#xff0c;让浪漫“超级加倍”。 美好的二人世界&#xff0c;共度甜蜜时光&#xff0c;当然需要提前做好攻略&#xff0c;风和日丽的好天气能为约会加分不少。在规…

分享书架二维码 = 分享了10多本电子书

铁子们&#xff01;告诉你一个实用的方法&#xff0c;分享一个书架就等于分享了10多本电子书&#xff0c;不用再一本一本的发送给客户啦&#xff01; 方法如下&#xff1a; 1.首先打开FLBOOK电子杂志制作平台 2.我们开始上传自己的作品&#xff0c;选择PDF上传 3.进入编辑页面…

Python-主线程控制子线程结束-2

需求&#xff1a;主线程创建工作子线程和键盘输入监听子线程。 当用户输入 0 后&#xff0c; 工作子线程会收到停止信号并退出&#xff0c;此时键盘输入监听线程仍然运行&#xff1b; 当用户输入 1 后&#xff0c;会建立新的工作子线程&#xff1b; …

爆肝分享! 8款3D仿真软件推荐

当今&#xff0c;3D设计和制作已经成为许多领域中不可或缺的一部分&#xff0c;从建筑设计到电影制作&#xff0c;从游戏开发到工业设计&#xff0c;都需要强大的3D软件来实现想象中的世界。本文将介绍八款备受推崇的3D软件&#xff0c;这些软件不仅功能强大&#xff0c;而且易…

01、Cannot resolve MVC View ‘xxxxx前端页面‘

Cannot resolve MVC View ‘xxxxx前端页面’ 没有找到对应的mvc的前端页面。 代码&#xff1a;前端这里引入了 thymeleaf 模板 解决&#xff1a; 需要添加 thymeleaf 的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>s…

卷积神经网络——下篇【深度学习】【PyTorch】【d2l】

文章目录 5、卷积神经网络5.10、⭐批量归一化5.10.1、理论部分5.10.2、代码部分 5.11、⭐残差网络&#xff08;ResNet&#xff09;5.11.1、理论部分5.11.2、代码部分 话题闲谈 5、卷积神经网络 5.10、⭐批量归一化 5.10.1、理论部分 批量归一化可以解决深层网络中梯度消失和…

需求自动拆解子需求功能上线!自动估算再升级!

CoCode开发云旗下Co-Project V3.5智能项目管理平台正式发布&#xff0c;平台需求板块、估算板块以及需求分析工具全新升级&#xff1a;需求自动拆解为子需求&#xff0c;自动估算功能优化&#xff0c;需求分析工具界面优化。 需求自动拆解为多个子需求&#xff0c;有助于需求细…

2023.8 - java - String类

字符串广泛应用 在 Java 编程中&#xff0c;在 Java 中字符串属于对象&#xff0c;Java 提供了 String 类来创建和操作字符串。 String str "Runoob"; 在代码中遇到字符串常量时&#xff0c;这里的值是 "Runoob"&#xff0c;编译器会使用该值创建一个 S…

Hbase分布式安装

一、环境准备 启动zookeeper 启动hdfs 二、安装 上传安装包 1、解压 tar -zxf hbase-2.2.2-bin.tar.gz -C /opt/installs/2、更名 mv hbase-2.2.2/ hbase3、配置环境变量 [roothadoop11 conf]# vim /etc/profile export HBASE_HOME/opt/installs/hbase export PATH$PATH:$…

python操作elasticsearch

python操作elasticsearch_一个高效工作的家伙的博客-CSDN博客 待更新

5.物联网LWIP之Socket编程优化与实现(补充4)

UDP编程模型 1.UDP C/S模型 2.UDP API socket int socket(int domain, int type, int protocol); domain: AF_INET 这是大多数用来产生socket的协议&#xff0c;使用TCP或UDP来传输&#xff0c;用IPv4的地址 AF_INET6 与上面类似&#xff0c;不过是来用IPv6的地址 …

开学什么电容笔便宜又好用?ipad可以用的手写笔

如今&#xff0c;随着人们生活的智能化&#xff0c;一些人已经把传统的手提电脑换成了平板电脑。无论是用iPad画图&#xff0c;还是用来写笔记&#xff0c;我觉得它都很方便&#xff0c;但苹果的Pencil却很贵&#xff0c;很多人买不起。根据我对电容笔的深刻理解&#xff0c;如…

Java 注解计算12生肖,java Data中获取年,根据生日日期获取生肖注解,根据输入时间获取生肖,自定义注解的方式获取生肖 根据年份时间获取十二生肖

最近&#xff0c;开发中需要增加生肖&#xff0c;但是不想增加字段&#xff0c;于是通过注解的方式&#xff0c;实现生日与生肖的转换。 话不多说&#xff0c;直接上代码&#xff0c;如下&#xff1a; 实体类中的字段&#xff0c;添加自定义注解&#xff08;ToChineseZodiacSe…