react 项目内存放excal文件并实现下载功能

typings.d.ts配置(使用typescript)

         在umi+ts搭建的react项目内，没有对.xlsx文件进行处理是没办法通过文件导入获取到改文件的，可以在typings.d.ts文件内根据实际情况进行后缀添加，否则ts会报导入错误

1 declare module "*.png";
2 declare module "*.jpg";
3 declare module '*.less';
4 declare module "*.svg";
5 declare module "*.xlsx";

页面内通过 import或require方法皆可：

          import templateUrl from "./template.xlsx" 

          const templateUrl = require("./template.xlsx");

当通过 import或require引入后会出现报错提示：

 解决办法：

  1. npm install file-loader
  2. 找到umi配置文件一般路径为config/config.ts添加代码：
1   chainWebpack(config) {
2     config.module
3       .rule('file-loader')
4       .test(/\.(pdf|docx|doc|xlsx|mp4)$/)
5       .use('file-loader?name=[path][name].[ext]')
6       .loader('file-loader')
7       .end();
8   },

 

下面是引入xlsx文件并实现下载功能示例代码：

 1 const templateUrl = require("./template.xlsx"); 
 2 
 3 <Button  type="primary"  onClick={() => { handleTemplate(); }}>下载模板</Button>
 4 
 5 // 下载文件，自定义文件名称
 6 downFile(url: string, fileName: any) {
 7   const x = new XMLHttpRequest();
 8   x.open("GET", url, true);
 9   x.responseType = "blob";
10   x.onload = function () {
11     const url = window.URL.createObjectURL(x.response);
12     const a = document.createElement("a");
13     a.href = url;
14     a.download = fileName;
15     a.click();
16   };
17   x.send();
18 } 
19 
20 const handleTemplate = () => {
21     downFile(window.location.origin + templateUrl.default, "模版名称");
22   };

 

posted @ 2023-07-24 15:42  Naynehcs  阅读(518)  评论(0)  编辑  收藏  举报