如何從 vue.js 網頁下載本地 CSV 文件？

Question

我是 vue.js 的新手，我主要想知道如何讓我的網頁顯示下載鏈接，用於下載我在本地存儲的 csv 文件。

我創建了一個組件 Template.vue。 在里面我有

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

在出口中，我有這個：

export default {
  name: 'Template',
  data () {
    return {
      item: {loc: require("../assets/example.csv")}
    }
  }
}

目前這不適用於 CSV 文件。 當我嘗試使用 CSV 文件運行此代碼時收到以下錯誤：

“./src/assets/example.csv Module parse failed: Unexpected token (1:14) 你可能需要一個合適的加載器來處理這個文件類型。”

但是，如果我嘗試下載圖像（png），則它可以工作。 我如何去實現一個加載器？ 或者有其他方法可以解決我的問題嗎？

Answer 1

你在使用 vue-cli 嗎？ 如果你這樣做，我想你可以做類似的事情

import csvFile from "../assets/example.csv"

export default {
  name: "Template",
  data() {
    return {
      item: csvFile
    }
  }
}

// in your template

<a :href="item"> </a>

如果您的 csv 文件不是動態生成的，您可能可以將其用作靜態資產並鏈接到它的路徑。 我已經有一段時間沒有使用 Vue 做過任何事情了，但是根據文檔的快速瀏覽，我認為您可以將 csv 文件放入靜態文件夾並像這樣引用它：

<a href="./assets/example.csv">{{someTitle}}</a>

鏈接到文檔： https : //cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation

Answer 2

我找到了這個答案：

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)-然后您可以將本地文件導入到您的組件中，該文件將自動轉換為 js 對象：

    import csv from './assets/file.csv'
    export default{
      created(){
        console.log(csv)
    }
  }

這是答案的鏈接： https : //www.fabiofranchino.com/log/include-csv-in-vue-cli-project/