gif-vue-io

Based on Vue3 plugin, for Common components example: quickly implement the function of uploading Excel to JSON, importing JSON, and exporting Excel

Install it

pnpm install gif-vue-io

Specific usage:

This plugin has two components:This plugin has two components: ExcelExportJson and JsonExportExcel

Global import

main.ts

import gifVueComponents from 'gif-vue-io';
import 'gif-vue-io/dist/style.css';
createApp(App).use(gifVueComponents).mount('#app');

Upload Excel to JSON use ExcelExportJson, import in component

<div>
  <excel-export-json size="large" @change="handleChange"></excel-export-json>
</div>
<script setup lang="ts">
const handleChange = (data: any) => {
  console.log('🚀 ~ handleChange ~ data:', data);
};
</script>

importing JSON, and exporting Excel use JsonExportExcel, import in component

<div>
 <JsonExportExcel :json-data="jsonData" :fields="headerName"  :title="title"></JsonExportExcel>
</div>
<script setup lang="ts">
const handleChange = (data: any) => {
  console.log('🚀 ~ handleChange ~ data:', data);
};
const headerName = {
  name: 'name',
  city: 'city',
  country: 'country',
  birthdate: 'birthdate'
};
const jsonData = ref([
  {
    name: 'Tony Peña',
    city: 'New York',
    country: 'United States',
    birthdate: '1978-03-15'
  },
  {
    name: 'Thessaloniki',
    city: 'Athens',
    country: 'Greece',
    birthdate: '1987-11-23'
  }
]);
const title = 'Person information table';
</script>

Props List

Name	Type	Description
json-data	Array	Data to be exported soon
fields	Object	The fields and headers within the JSON object to be exported.
title	string	The title of the data.

for test in project
pnpm install
pnpm run dev

发布插件：
在根目录
1 修改版本号
2 npm adduser
npm version 0.0.8 (设置版本)
3 npm publish
4 npm unpublish gif-vue-io@0.1.4 删除不想保留的版本(npm unpublish 名称@版本号)
以上仅限于没有人下载的该版本时使用，一旦被下载，就只能设置为
5 npm deprecate js-sls-logger-v3@1.0.1 deprecate

.npmrc 里可以免密码配置

tag 冲突解决
git pull --tags -f