vue项目中下载表格模板的方法

最近有一个需求，需要下载一个模板表格，这个表格不同之前的只有表头和内容，这个表格在最前面加了很多注意事项，而且是多行合并的。如图![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/8e52af54ab984bd18f815b772adf1bdc.png#pic_center
方法一：转成a标签形式下载：

const exportTable = () =>{
let str = `填写须知：
请勿增加、修改、删除、移动模板表头字段，并依照以下说明填写字段信息，否则会导致表格无法上传！
1、所属平台：必填，
2、名称：必填，
3、登录账号：非必填，登录平台的账号
4、登录密码：非必填，登录平台的密码
5、标签：非必填，可以填写对账号的分类，若存在多个，可用英文分号"";""隔开",,,,
所属平台（必填）,名称（必填）,登录账号,登录密码,标签\n`;
  //防止中文乱码
  const uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
  const link = document.createElement("a");
  link.href = uri;
  // 对下载的文件命名
  link.download = `导出表格.csv`;
  link.click();
}

这个方法可以下载成功，但是会将注意事项分行展示，和需求不一样

方法二：用el-upload上传组件，点击的时候上传文件并用xlsx解析下载

<el-upload
      class="upload"
      :http-request="afterUpload"
      action=""
      accept=".xls,.xlsx,.csv"
      ></el-upload>

const afterUpload = (params) => {
	const reader = new FileReader()
	reader.onload = async (e) => {
    const data = e.target!.result;
    const workbook = XLSX.read(data, {
      type: "binary",
    });
    XLSX.writeFile(workbook, "test.xlsx");
    }
}
    >```
这个方法也可以下载文件，但是会将须知合并成一行，显示不全，不美观
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/27a92fb2830a486ba0f9db8ccba7785d.png#pic_center)
如上两种方法都不能解决需求，只能求助于后端，**通过请求后端blob文件流下载**

```javascript
let res = await templateDownload({}); //封装的后端下载接口
  const blob = new Blob([res]);
  let link = document.createElement("a"); // 创建下载的实体标签
  link.href = URL.createObjectURL(blob); // 创建下载的链接
  link.download = "账号批量导入模板" + ".xlsx"; // 下载的文件名
  link.click(); // 执行下载
  URL.revokeObjectURL(link.href); // 下载完成释放掉blob对象

这个方法有一个需要注意的地方，请求的时候一定要加上responseType: ‘blob’
例如：

http({
            method: 'post',
            url: rootUrl + url,
            // url: url,
            data: data,
            headers: {
                'Content-Type': headers,
            }, 
            responseType: ‘blob’// 相应类型如果有的话，就用接口中的，如果没有就默认为null
        });

目前用的就是请求后端接口才完成这个需求，如果各位有其他方法也请分享给我