vue实现模板下载
Vue 实现模板下载的方法
在 Vue 项目中实现模板下载功能，可以通过以下几种方式实现：
前端生成并下载模板
使用 Blob 对象和 URL.createObjectURL 方法生成下载链接：
// 示例：下载 CSV 模板
downloadTemplate() {
const csvContent = '姓名,年龄,性别\n张三,25,男\n李四,30,女'
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = '用户模板.csv'
link.click()
URL.revokeObjectURL(link.href)
}使用第三方库
对于复杂的 Excel 模板，可以使用 xlsx 库：
import XLSX from 'xlsx'
downloadExcelTemplate() {
const ws = XLSX.utils.aoa_to_sheet([
['姓名', '年龄', '性别'],
['张三', 25, '男'],
['李四', 30, '女']
])
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
XLSX.writeFile(wb, '用户模板.xlsx')
}从服务器获取模板文件
通过 API 接口获取模板文件：
axios({
url: '/api/template/download',
method: 'GET',
responseType: 'blob'
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.download = 'template.xlsx'
link.click()
window.URL.revokeObjectURL(url)
})使用 Vue 组件实现下载按钮
在模板中添加下载按钮：
<template>
<button @click="downloadTemplate">下载模板</button>
</template>
<script>
export default {
methods: {
downloadTemplate() {
// 下载逻辑
}
}
}
</script>处理不同文件格式
根据需求处理不同格式的模板文件：
// PDF 文件
downloadPDFTemplate() {
window.open('/templates/sample.pdf', '_blank')
}
// Word 文件
downloadWordTemplate() {
const link = document.createElement('a')
link.href = '/templates/sample.docx'
link.download = 'template.docx'
link.click()
}以上方法可以根据实际项目需求选择使用，前端生成适合简单的模板，复杂模板建议从服务器获取。
