vue 下載本地文件

情景描述：

有時，我們需在在前端項目中下載本地某個地址的文件模塊，這個文件不想放在後端去下載。所以，在這個文件大小不是太大的情況下，我們可以把文件放在前端項目目錄中，這樣不管開發環境還是生產環境，都能在同樣的路徑下找到那個文件。

 

實現：

1. 先得把文件放在項目工程目錄下的某個路徑下，這個路徑不管是開發環境還是打包之後在生產環境，都是一樣的。在vue-cli 3.x+的版本中，這個文件夾叫public:

把需要下載的文件放在public目錄下，打包之後，public目錄下的所有文件會直接拷貝到dist目錄中。

2. 定義文件下載地址

downloadUrl: `${process.env.BASE_URL}fileResources/template.xlsx`, // 模板下載文件地址

這個地址是由process.env.BASE_URL和public下待下載文件的路勁拼一起來的，其中process.env.BASE_URL是從環境進程中根據運行環境獲取的，這樣才能不管在開發環境還是生產環境，都能拿到對應的下載地址。

3.點擊a標籤直接打開下載地址，下載文件到本地默認下載路徑。

<a :href="downloadUrl" download="personnelImportTemplate.xlsx" style="color: #FF0000; text-decoration: underline">{{ $t('modal.template') }}</a>

download的值要和待下載文件名一樣，包括文件後綴名。

 

===》END

歡迎交流~