vue json csv_使用Vue下载JSON或CSV文件的组件库

杜经艺

2023-12-01

vue json csv

vue-blob-json-csv (vue-blob-json-csv)

Component library to download a JSON or CSV file using Vue.

组件库，可使用Vue下载JSON或CSV文件。

View Demo 查看演示 View Github 查看Github

安装 (Installation)

NPM / Yarn
NPM /纱线

$ yarn add vue-blob-json-csv
# or
$ npm i --save vue-blob-json-csv

Modules
模组

import Vue from "vue";
import VueBlobJsonCsv from 'vue-blob-json-csv';

Vue.use(VueBlobJsonCsv)

CDN
CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./dist/VueBlobJsonCsv.umd.min.js"></script>
<script>
  Vue.use(VueBlobJsonCsv.default);
  new Vue({
    el: "#app"
  })
</script>

用法 (Usage)

模组 (Module)

<template>
  <vue-blob-json-csv
    @success="handleSuccess"
    @error="handleError"
    tag-name="div"
    file-type="json"
    file-name="sample"
    title="Download JSON"
    :data="data"
    confirm="Do you want to download it?"
  >
</template>

Use Slot
使用广告位

<template>
  <vue-blob-json-csv
    @success="handleSuccess"
    @error="handleError"
    file-type="json"
    file-name="sample"
    :data="data"
  >
    <h2>Title</h2>
    <p>csv download</p>
  </vue-blob-json-csv>
</template>

CDN (CDN)

<body>
  <div id="app">
    <p>{{msg}}</p>
    <button @click="sayHello">Hi!</button>
    <vue-blob-json-csv
      file-type="json"
      file-name="todos"
      data="[
              {
                userId: 1,
                id: 1,
                title: 'delectus aut autem',
                completed: false
              },
              {
                userId: 1,
                id: 2,
                title: 'quis ut nam facilis et officia qui',
                completed: false
              },
              {
                userId: 1,
                id: 3,
                title: 'fugiat veniam minus',
                completed: false
              }
            ]"
    >
      Download JSON
    </vue-blob-json-csv>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/VueBlobJsonCsv.umd.min.js"></script>
  <script>
    Vue.use(VueBlobJsonCsv.default);
    new Vue({
      el: "#app"
    })
  </script>
</body>

道具 (Props)

Prop	Data Type	Required	Default	Description
`tagName`	String	`false`	`span`	Element Tag Name
`title`	String	`false`		Button title name
`fileType`	String	`true`	`csv`	File extension (`csv` or `json`)
`fileName`	String	`false`	`data`	File name
`data`	Array	`true`		Data you want to export
`fields`	Array	`false`		Export only specific keys
`confirm`	String	`false`		Text to display in the dialog

Struts	数据类型	需要	默认	描述
`tagName`	串	`false`	`span`	元素标签名称
`title`	串	`false`		按钮标题名称
`fileType`	串	`true`	`csv`	文件扩展名( `csv`或`json` )
`fileName`	串	`false`	`data`	文档名称
`data`	数组	`true`		您要导出的数据
`fields`	数组	`false`		仅导出特定密钥
`confirm`	串	`false`		在对话框中显示的文字

大事记 (Events)

Event	Description
`success`	Event after download is complete
`error`	Error

事件	描述
`success`	下载完成后的事件
`error`	错误

贡献 (Contributing)

Welcome to improve vue-blob-json-csv with any issue, pull request or code review.

欢迎改善任何问题，请求请求或代码审查的vue-blob-json-csv。

# Setup
$ cd vue-blob-json-csv
$ yarn

# dev-server
$ yarn serve

# Build
$ yarn build:lib

# Unit Testing
$ yarn test:unit

# Lint
$ yarn lint
# Lint - fix
$ yarn lint --fix

翻译自: https://vuejsexamples.com/component-library-to-download-a-json-or-csv-file-using-vue/