需求導入的下載模版不想放在服務器放在前端本地下載靜態資源最簡單的方式直接訪問 public 文件夾下的文件
方法一:使用靜態文件路徑
將文件放在 public 文件夾中:
把你的文件從 src/assets 移動到 public 文件夾。例如:public/template.xls。
在 Vue 組件中使用相對路徑:
<template><div><button @click="downloadTemplate">下載模板</button></div>
</template><script>
export default {methods: {downloadTemplate() {// 使用相對路徑const fileUrl = '/template.xls';// 創建一個隱藏的a標簽const link = document.createElement('a');link.href = fileUrl;link.download = 'template.xls'; // 設置下載文件名// 將a標簽添加到DOM并觸發點擊事件document.body.appendChild(link);link.click();// 移除a標簽document.body.removeChild(link);}}
}
</script><style scoped>
/* 你的樣式代碼 */
</style>
二、確保項目目錄如下
my-vue-project/
├── public/
│ └── template.xls
├── src/
│ ├── assets/
│ ├── components/
│ └── App.vue
└── vue.config.js
三、驗證
啟動你的開發服務器,通常是 npm run serve或npm run dev。
直接在瀏覽器中訪問 http://localhost:9000/template.xlsx 看是否能訪問到文件。
通過以上步驟,應該能夠確保靜態文件能夠正確訪問和下載