Question

我有一个上传系统，我正在尝试为用户提供示例模板。我有一个模板本地存储在资产的子文件夹中，我想在我的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?

Answer 1

感谢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语句与loader一起使用会使＆＃34; required＆＃34;项目构建时，将文件放入wwwroot / files文件夹中。再次感谢OverCoder，这为我节省了很多时间。

Answer 2

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

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

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

Answer 3

我在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>

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

Answer 4

试试这个：

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

Answer 5

这对我有用；

If (LCase(oCurR(iCC, 2)) = LCase(oSourceR(iSC, 2))) And _
   (LCase(oCurR(iCC, 3)) = LCase(oSourceR(iSC, 3))) And _
   (LCase(oCurR(iCC, 4)) = LCase(oSourceR(iSC, 4))) And _
   (LCase(oCurR(iCC, 5)) Like "*" & LCase(oSourceR(iSC, 5))) Then
        oSourceR(iSC, 7) = oCurR(iCC, 6)
        Exit For
End If

即使在对话框中，它的表现也很好。

Answer 6

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

提供href链接如下：

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

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

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

在 Vue3 上测试和工作

Answer 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]`
          }
        }
      ],
     },
  },
};

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

7 个答案: