客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：jecovier/vue-json-excel开源软件地址：https://github.com/jecovier/vue-json-excel开源编程语言：Vue 94.4%开源软件介绍：JSON to Excel for VUE 2Download your JSON data as an Excel file directly from the browser. This component is based on the solution proposed on this thread Important! Extra prompt in Microsoft ExcelThe method implemented in this component uses HTML tables to draw the .xls files, Microsoft Excel no longer recognize HTML as native content so a warning message will be displayed before opening the file. The content will be rendered perfectly but the message can't be avoided. Getting startedGet the package: npm install vue-json-excelRegister JsonExcel in your vue app entry point: import Vue from "vue";
import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel);In your template <download-excel :data="json_data">
Download Data
<img src="download_icon.png" />
</download-excel>Props List
Exampleimport Vue from "vue";
import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel);
const app = new Vue({
el: "#app",
data: {
json_fields: {
"Complete name": "name",
City: "city",
Telephone: "phone.mobile",
"Telephone 2": {
field: "phone.landline",
callback: (value) => {
return `Landline Phone - ${value}`;
},
},
},
json_data: [
{
name: "Tony Peña",
city: "New York",
country: "United States",
birthdate: "1978-03-15",
phone: {
mobile: "1-541-754-3010",
landline: "(541) 754-3010",
},
},
{
name: "Thessaloniki",
city: "Athens",
country: "Greece",
birthdate: "1987-11-23",
phone: {
mobile: "+1 855 275 5071",
landline: "(2741) 2621-244",
},
},
],
json_meta: [
[
{
key: "charset",
value: "utf-8",
},
],
],
},
});In your HTML call it like <download-excel
class="btn btn-default"
:data="json_data"
:fields="json_fields"
worksheet="My Worksheet"
name="filename.xls"
>
Download Excel (you can customize this with html code!)
</download-excel>REQUIRED
let json_fields = {
// regular field (exported data 'as is')
fieldLabel: attributeName, // nested attribute supported
// callback function for data formatting
anotherFieldLabel: {
field: anotherAttributeName, // nested attribute supported
callback: (value) => {
return `formatted value ${value}`;
},
},
};json_fields is a object that represents which columns will be exported. If no object is provided, the component will be use the first object in your data array to extract the keys as columns names. Json field example: Export CSVTo export JSON as a CSV file, just add the prop <download-excel
class="btn btn-default"
:data="json_data"
:fields="json_fields"
type="csv"
name="filename.xls"
>
Download CSV (you can customize this with html code!)
</download-excel>Multi-line values will appear in a single cellA single text value in the data that contains newline characters will appear as a single cell in Excel. This avoids the undesired behavior of multi-line values getting split into multiple cells that must be merged before using data filters and pivot tables. For example: <template>
<div>
<json-excel :data="dataForExcel" />
</div>
</template>
<script>
import JsonExcel from "@/components/JsonExcel";
export default {
components: {
JsonExcel,
},
data: () => {
return {
dataForExcel: [
{ colA: "Hello", colB: "World" },
{
colA: "Multi-line",
/* Multi-line value: */
colB:
"This is a long paragraph\nwith multiple lines\nthat should show in a single cell.",
},
{ colA: "Another", colB: "Regular cell" },
],
};
},
};
</script>
Fetch Data on DemandIn case you need to fetch data from the server, you could use the fetch prop that allows you to define a callback function that is executed when your user click the download button. This function has to return a JSON value containing the data to export. A basic use case is: <template>
<div id="app">
<hr>
<h2>Fetch Example</h2>
<downloadexcel
class = "btn"
:fetch = "fetchData"
:fields = "json_fields"
:before-generate = "startDownload"
:before-finish = "finishDownload">
Download Excel
</downloadexcel>
</div>
</template>
<script>
import downloadexcel from "vue-json-excel";
import axios from 'axios';
export default {
name: "App",
components: {
downloadexcel,
},
data(){
return {
json_fields: {
'Complete name': 'name',
'Date': 'date',
},
}
}, //data
methods:{
async fetchData(){
const response = await axios.get('https://holidayapi.com/v1/holidays?key=a4b2083b-1577-4acd-9408-6e529996b129&country=US&year=2017&month=09');
console.log(response);
return response.data.holidays;
},
startDownload(){
alert('show loading');
},
finishDownload(){
alert('hide loading');
}
}
};
</script>Using callbackswhen using callback functions in the fields description, you have three option to retrieve data:
json_fields: {
'Complete name': 'name',
'City': 'city',
'Telephone': 'phone.mobile',
'Telephone 2' : {
field: 'phone.landline',
callback: (value) => {
return `Landline Phone - ${value}`;
}
},
},
json_fields: {s
'Complete name': 'name',
'City': 'city',
'Telephone': 'phone.mobile',
'Telephone 2' : {
field: 'phone',
callback: (value) => {
return `Landline Phone - ${value.landline}`;
}
},
},
json_fields: {
'Complete name': 'name',
'City': 'city',
'Telephone': 'phone.mobile',
'Telephone 2' : {
callback: (value) => {
return `Landline Phone - ${value.phone.landline}`;
}
},
},LicenseMIT StatusThis project is in an early stage of development. Any contribution is welcome :D 
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论