如何在 VueJS 中下载本地存储的文件

Posted 2023-02-22

【中文标题】如何在 VueJS 中下载本地存储的文件

【英文标题】：How to download a locally stored file in VueJS

【发布时间】：2018-06-09 12:02:53

【问题描述】：

我有一个上传系统，我正在尝试为用户提供一个示例模板。我有一个本地存储在资产子文件夹中的模板，我想在我的 VueJS 组件中访问它并在页面上显示指向它的链接。这些是文件结构的应用部分：

├──app
│  └──Components
│     └──Uploader.vue
└──assets
   └──files
      └──Template_Upload.csv

在 Uploader.vue 我有这一行：

<a v-bind:href="item.loc" download>item.title</a>

在导出中我有这一行

data() 
  return 
    item: title: 'Upload Template', loc: require('../../assets/files/Template_Upload.csv')

如果我有图像，此方法有效。单击链接后，它会下载图像。但是，如果我使用 .csv 或 .xlsx 文件，打开页面时会引发错误。我试过使用

import fileTemplate from "../../assets/files/FileTemplate.csv";

同样，使用 fileTemplate 作为 loc 属性。如果我使用图片，这也有效。但我无法带入文件。这是我无法克服的限制，还是我可以尝试其他方法？

我还进入了 Visual Studio（换句话说，.csproj 文件），并将 Template_Upload.csv Build Action 设置设置为“Content”，Copy到输出目录设置设置为“始终复制”。

这些是我目前主要使用的资源：

How to import and use image in a Vue single file component?

What are the various "Build action" settings in Visual Studio project properties and what do they do?

【问题讨论】：

您需要一个 CSV 加载程序。其他选项包括让您的 Web 服务器为该目录提供服务，然后 loc 将只是一个典型的链接

【参考方案1】：

对于不想使用 webpack 的人，我解决了这个问题：

在public 中创建一个名为files 的文件夹 我将要下载的文件移到了那里 瞧，工作了。

<a href="/files/book.pdf" download>DOWNLOAD</a>

【讨论】：

完美运行

【参考方案2】：

感谢 OverCoder，解决方案确实是添加一个 CSV 加载器，以便将本地存储的文件添加到 webpack 服务器。对于其他使用 webpack 的人，我将此模块添加到我的 webpack.config.js 文件中：

    test: /\.(csv|xlsx|xls)$/,
    loader: 'file-loader',
    options: 
        name: `files/[name].[ext]`
    

然后我可以像这样在我的模板中轻松引用该文件，

<a href="/files/Template_Upload.csv" download>File Template</a>

或者这个

<a :href="item.loc" download>File Template</a>

使用与我所说的相同的数据返回。在项目构建时，将 require 语句与加载器一起使用会将“必需”文件放入 wwwroot/files 文件夹中。再次感谢 OverCoder，这为我节省了很多时间。

【讨论】：

这有点晦涩难懂。什么要求声明？它可以看到的确切文件夹结构是什么？我正在进行的项目已经相当大了，我不确定我是否可以在任何我想要的地方添加任何assets 文件夹。

【参考方案3】：

这对我有用；

<a href="../../assets/files/FileTemplate.csv" download>Download</a>

即使在对话框中也表现得很好。

【参考方案4】：

试试这个：

<a href="../../assets/files/FileTemplate.csv">Download</a>

【参考方案5】：

我在 Laravel 上，我关注 this tuto 让我的工作：

创建一个FileController，添加一个下载方法

public function downloadFile($file)
   $path = public_path().'/app/upload-folder/'.$file; // or storage_path() if needed
   $header = [
       'Content-Type' => 'application/*',
   ];
   return response()->download($path, $file, $header);

在api.php中创建一个api入口点

Route::get('download/upload-folder/file', 'FileController@downloadFile');

创建一个使用 axios 的方法

async downloadTemplateFile(file)
    axios.get('/download/template/file/'+file, responseType: 'arraybuffer').then(res=>
      let blob = new Blob([res.data], type:'application/*')
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = file
      link._target = 'blank'
      link.click();
    )
  

从 vue 模板调用

<li>Download the CSV template <a href="#" @click="downloadTemplateFile('FileTemplate.csv')">here</a></li>

希望这对其他人有帮助；）

【讨论】：

不，它没有逐字逐句地尝试这样做

【参考方案6】：

将您要下载的文件放在公共文件夹中，因为它是您应用程序的根文件夹。 文件结构图像-> Image Link

给出如下链接：

<a :href="'/files/SampleFile.xlsx'" class="btn btn-primary" download>Sample File</a>

您可以提供文件夹结构中的任何文件。例如：.pdf、.xlsx、.png 等

请注意，href 为 :href，文件路径为 " '您的文件路径' "

在 Vue3 上测试和工作

【参考方案7】：

只是@Judd's answer 的扩展。如果您没有webpack.config.js，可以使用vue.config.js 文件。 （如果不存在就在根目录下创建）

vue.config.js

module.exports = 
  configureWebpack: 
    module: 
      rules: [
        
          test: /\.(csv|xlsx|xls)$/,
          loader: 'file-loader',
          options: 
            name: `files/[name].[ext]`
          
        
      ],
     ,
  ,
;

【参考方案8】：

试试这个方法，它有一个按钮：

<a href="/files/Template_Upload.csv" download>
    <button class="btn btn-primary">Download</button>
</a>