[英]How to download a local CSV file from a vue.js webpage?
I'm new to vue.js and I am mainly wondering how I can have my webpage display a download link for downloading a csv file that I have stored locally.我是 vue.js 的新手,我主要想知道如何让我的网页显示下载链接,用于下载我在本地存储的 csv 文件。
I have created a component Template.vue.我创建了一个组件 Template.vue。 Inside it I have
在里面我有
<a :href="item.loc" download> {{item.title}} </a>
And in the export I have this:在出口中,我有这个:
export default {
name: 'Template',
data () {
return {
item: {loc: require("../assets/example.csv")}
}
}
}
At the moment this doesn't work for CSV-files.目前这不适用于 CSV 文件。 I received the following error when I tried to run this code with a CSV-file:
当我尝试使用 CSV 文件运行此代码时收到以下错误:
"./src/assets/example.csv Module parse failed: Unexpected token (1:14) You may need an appropriate loader to handle this file type." “./src/assets/example.csv Module parse failed: Unexpected token (1:14) 你可能需要一个合适的加载器来处理这个文件类型。”
However, if I would try to download an image(png) then it works.但是,如果我尝试下载图像(png),则它可以工作。 How do I go about implementing a loader?
我如何去实现一个加载器? Or are there other ways to solve my problem?
或者有其他方法可以解决我的问题吗?
Are you using vue-cli?你在使用 vue-cli 吗? If you do i guess you could do something like
如果你这样做,我想你可以做类似的事情
import csvFile from "../assets/example.csv"
export default {
name: "Template",
data() {
return {
item: csvFile
}
}
}
// in your template
<a :href="item"> </a>
If your csv-file isn't dynamically generated, you could probably use it as a static asset and just link to it's path.如果您的 csv 文件不是动态生成的,您可能可以将其用作静态资产并链接到它的路径。 It's been a while since i've done anything with Vue, but according to a quick glance at the docs i think you can put your csv file into your static folder and reference it like this:
我已经有一段时间没有使用 Vue 做过任何事情了,但是根据文档的快速浏览,我认为您可以将 csv 文件放入静态文件夹并像这样引用它:
<a href="./assets/example.csv">{{someTitle}}</a>
Link to docs: https://cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation链接到文档: https : //cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation
I found this answer :我找到了这个答案:
1)-Install the loader with npm i csv-loader -D
2)-add this code into the vue.config.js
file: 1)-使用
npm i csv-loader -D
安装加载npm i csv-loader -D
2)-将此代码添加到vue.config.js
文件中:
module.exports = {
chainWebpack: config => {
config
.module
.rule('csv')
.test(/\.csv$/)
.use('csv-loader')
.loader('csv-loader')
.options({
dynamicTyping: true,
header: true,
skipEmptyLines: true
})
.end()
}
}
3)-then you can import local files into your components,the file will automatically be converted to a js object: 3)-然后您可以将本地文件导入到您的组件中,该文件将自动转换为 js 对象:
import csv from './assets/file.csv'
export default{
created(){
console.log(csv)
}
}
and here is a link to the answer: https://www.fabiofranchino.com/log/include-csv-in-vue-cli-project/这是答案的链接: https : //www.fabiofranchino.com/log/include-csv-in-vue-cli-project/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.