当前位置：首页 > article >正文

vue3+ts 实现模板表格文件下载~

article 2024/9/25 3:19:16

1、效果图：

2、创建点击事件，并发起请求，获取模板表格文件下载url地址。

//组件
<a-button class="btn btn_width" @click="download"> 下载模板 </a-button>

// 文件模板下载
import { getTemplate } from '@/api/import';
const download = () => {
  getTemplate({ type: 6 });
};

3、创建请求

//下载模板接口
import { request } from '@/utils/request';
import { downUrl } from '@/utils/downloadFile';

let baseURL = '/api';

//下载模板
export const getTemplate = async (params) => {
  const res = await request({
    url: `${baseURL}/import/template/get-import-template-by-type`,
    method: 'GET',
    params,
  });
  downUrl(res);
};

4、调用另一个方法，实现根据返回的下载地址下载表格文件。

export const downUrl = (res: any) => {
  const downloadPath = res;

  // 创建一个隐藏的 <a> 标签
  const downloadLink = document.createElement('a');
  downloadLink.style.display = 'none';
  document.body.appendChild(downloadLink);

  // 设置下载链接的 href 属性为后端返回的下载路径
  downloadLink.href = downloadPath;

  // 触发下载
  downloadLink.click();

  // 清除创建的元素
  document.body.removeChild(downloadLink);
};

5、解决跨域问题

//vue.config.ts
proxy: {
      '/api': {
        target: 'baseurl地址', // 目标服务器地址
        changeOrigin: true, // 允许改变 Origin
        pathRewrite: {
          '^/api': '', // 重写路径，将 /api 替换为空
        }
      }
    },

查看全文

http://www.kler.cn/news/288991.html