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

发布于12月30日

我有一个上传系统，我试图为用户提供一个样本模板.我有一个模板本地存储在assets资源的子文件夹中，我想在VueJS组件中访问它，并在页面上显示指向它的链接.以下是文件 struct 的适用部分:

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

在上传程序中.我有一句话:

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

在出口方面，我有这一行

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

如果我有一张图片，这个方法就行了.点击链接后，它会下载图像.但是，如果我使用.csv或a.xlsx文件，打开页面时会抛出错误.我试过使用

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

同样，使用fileTemplate作为loc属性.如果我使用图片，这也适用.但我不能带文件来.这是我无法克服的限制，还是我可以try 其他方法？

我还进入了VisualStudio(换句话说，就是.csproj文件)，并设置了模板.csv Build Action设置设置为"内容"，Copy to Ouput Directory设置为"始终复制".

以下是我迄今为止主要使用的资源:

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?

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

推荐答案

Vue.js相关问答推荐

Nuxt 3 I18N浏览器检测不起作用

将 html 文件移出 dist vite 中的 src 文件夹

在预渲染模式下部署 nuxt 3 时出错

如何在Vue3中使用vuechartjs 5.2从父组件更新图表

Vue 3 范围滑块中的多个值

Vuetify 扩展面板，面板标题左侧带有图标

如何在 Nativescript 应用程序中调用 axios/api 调用

如何从特定索引呈现 v-for

如何更新手动安装的 vue 组件上的props？

如何在 .js 文件中使用 Vue i18n 翻译？

Vuetify - 如何在 v-data-table 中单击时突出显示行

Modal 内部的 Vue.js AJAX 调用

为 Vue 组件动态添加属性

单击时交换组件

laravel vuejs/axios put request Formdata 为空

vuex - 即使不推荐，是否可以直接更改状态？

Vue.js 3 - 替换/更新react性对象而不会失go react性

vue 未在实例上定义，但在渲染期间引用

在Vue中调用方法时的括号

将它们分开时将 Django 的 csrf_token 放入 Vuejs