vue前端下载xls模板中文

实现 Vue.js 前端应用中下载带中文内容的 XLS 模板文件
配置 vue.config.js 文件
vue.config.js 是一个可选的配置文件，如果在项目根目录上存在这个文件，则会被 @vue/cli-service 加载。通过设置合适的路径和其他选项来优化项目的构建过程[^1]。
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/prod-path/' : '/'
}

准备静态模板文件
为了提供给用户下载功能，在 static 文件夹下放置所需的 XLS 模板文件。这一步骤确保了当用户点击按钮时可以直接访问到该模板文件[^2]。
<template>
<div>
<!-- 导入模板 -->
<el-button type="text" @click="downloadTemplate" size="mini">导入模板</el-button>
</div>
</template>

<script>
export default {
methods: {
downloadTemplate() {
const link = document.createElement('a')
link.href = `${process.env.BASE_URL}templates/template.xlsx`
link.download = 'template.xlsx'
link.click()
}
}
}
</script>

创建辅助脚本用于处理 Blob 数据
对于更复杂的场景或者需要动态生成的内容，可以在 assets 下创建两个 JavaScript 脚本来帮助完成导出操作：一个是用来处理二进制大对象 (Blob) 的工具函数；另一个则是具体的 Excel 导出逻辑实现[^3]。
blob.js
此文件定义了一个简单的工厂方法来创建包含特定编码文本数据的 Blob 对象：
// assets/blob.js
function createBlob(content, contentType) {
return new Blob([content], {type: contentType});
}

export {createBlob};

exportExcel.js
这里实现了将 JSON 数据转换成适合写入 Excel 表格的形式，并最终形成可供浏览器保存下来的 .xls 文件流：
import {createBlob} from './blob';

const EXCEL_TYPE = 'application/vnd.ms-excel;charset=UTF-8';
const EXCEL_EXTENSION = '.xls';

/**
* 将表格数据转化为字符串形式并封装为 Blob 返回
*/
function jsonToExportFormat(jsonData){
let result = '';

jsonData.forEach((row)=>{
Object.values(row).forEach(value=>{
result += value + '\t'; // 使用 tab 分隔单元格
});
result += '\r\n'; // 新行分隔符
});

return result;
}

/**
* 接收 JSON 格式的二维数组作为参数，
* 并触发客户端下载动作。
*/
async function exportJsonToExcel(filename, jsonData){
try{
const content = jsonToExportFormat(jsonData);
const blob = createBlob(content, EXCEL_TYPE);

var a = document.createElement("a");
a.style.display = "none";
a.href = URL.createObjectURL(blob);
a.download = filename + EXCEL_EXTENSION;

document.body.appendChild(a);
a.click();

window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
} catch(error){
console.error(`Error exporting to excel ${error}`);
}
}

export {exportJsonToExcel};

处理后端返回的数据流
当涉及到从服务器获取 Excel 文件时，应该注意正确解析响应头中的 Content-Type 字段以确认接收到的是预期类型的文档。特别是对于包含非 ASCII 字符集（如中文字符）的情况，建议显式指明 UTF-8 编码方案以便于跨平台兼容性[^4]。
axios({
url: '/api/download/excel',
method: 'GET',
responseType: 'arraybuffer', // Important
})
.then(response => {
const headers = response.headers['content-type'];
const blob = new Blob([response.data], {type: headers});

var a = document.createElement("a");
a.style.display = "none";
a.href = URL.createObjectURL(blob);
a.download = 'data.xls';

document.body.appendChild(a);
a.click();

window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
}).catch(err=>console.log(err));