jecovier / vue-json-excel Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
hi is there any way to customize excel output? like in my table i have table that being grouped like this
<tbody>
<tr>
categories
</tr>
<tr>
<td>Title</td>
<td>Writer</td>
<td>Published</td>
<td>Created_at</td>
</tr>
</tbody>
is it also posibble in excel to generate style like that?
and also i have hide column feature in my html, so i want if i convert json to excel it also remove json fields that is coresponding to those column that hide, ex: i hide writer column that mean in json the writer fields will be removed from there to so in excel it will just show exactly column that shown in html table
Good day. Can this component be able to add custom information above the data grid? Like
User: Kosaki Onodera
Age: 17
Gender: Female
Thanks in advance. :)
Always export in xls and Excel open it in protected view.
I'd like to request an enhancement to the callback function. Currently you can only pass a single field to the callback, I'd like to give it access to the entire row of data.
This will open up more interesting options. Here is a simple example of how it could be used with the sample data:
'Location': {
field: '_ALL_',
callback: (value) => {
return value.city + ", " + value.country;
}
},
The change to implement this is very minor, just adding an extra if statement inside the getValue() function,
if (field === "_ALL_")
value = item;
else if (indexes.length > 1)
value = this.getValueFromNestedItem(item, indexes);
else
value = item[field];
What do you think?
I have tried the export to excel I do not know why but I am not able to get child baules and if it it is an usie or it just me
2 examples:
if I put the example of your wiki I get the following:
json_meta: [
[{
"key": "charset",
"value": "utf-8"
}]
],
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'
}
}
]
name | city | phone.mobile | [object Object] |
---|---|---|---|
undefined | undefined | undefined | undefined |
undefined | undefined | undefined | undefined |
if I use this another definition
json_fields: {
'name': 'name',
'city': 'his city',
'phone.mobile': 'mobile',
},
I get:
name | his city | mobile |
---|---|---|
Tony Peña | New York | undefined |
Thessaloniki | Athens | undefined |
So the wa it works for me is different to the example. I have to put the name in the json at the left and the label in the right. And I am not able to get a child like phone.mobile
In csv type the ip address look like 192168023
Hello there,
Thank you for your amazing work, it's really cool :)
Is there a way to retrieve the xls file without downloading it ?
I would like to retrieve and encode it in base64.
Thank you :)
Best regards,
Hello,
I try to create downloaded file '.xls' in vue. It works.
But, the file can (only) opened in LibreOffice. If I download file and opened in Ms. Office Excel, it can't open. The message appear seems like "... the extention don't match, corrupt or unsafe ...".
Or is there any configuration that must be set?
Thanks :)
Hi,
First of all thanks for putting together this work. After a little bit of tinkering, I was able to get it work.
Somehow the excel it generated has "null" in the first row, as in the following screenshot:
I assume this is something that can be passed from meta prop, but somehow the following meta didn't make a difference:
json_meta: [ [{ "key": "charset", "value": "utf-8" }], [{ "key": "head", "value": "Raw Data" }] ]
Am I missing anything?
Also on a side note, any chance to add a function to export simple CSV file?
Thanks again.
I did a correct import of the vue-json-excel library and also did:
import JsonExcel from 'vue-json-excel'
component: {
'downloadExcel': JsonExcel
},
But here's the error I get on the console:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Apologies if this has been addressed already first and foremost.
I really like this component that you have made and am wondering if there is an ability to support changing the extension to xlsx in the near future?
ty so much :)
I am wondering why null is interpreted as the string value "null"
jsonData = [
{
"Name1": "John",
"Name2": null
},
{
"Name1": "Doo",
"Name2": null
}
]
I did a workaround but this shouldn't be the final solution right?
computed: {
json_data () {
return this.jsonData.map(e => {
let tmp = {}
for (let k in e) {
tmp[k] = e[k] === null ? '' : e [k]
}
return tmp
})
}
}
Hi. I'm using Vue with webpack, and I can't configure this to work properly
My main.js is like this:
import Vue from 'vue'
import store from './store/store'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import VueJWT from 'vuejs-jwt'
import JsonExcel from 'vue-json-excel'
import 'vuetify/dist/vuetify.min.css'
import 'font-awesome/css/font-awesome.css'
/* eslint-disable */
Vue.config.productionTip = false
Vue.use(Vuetify, {
theme: {
primary: '#372924',
secondary: '#a1947d',
accent: '#8c9eff',
error: '#b71c1c',
white: '#fff'
}
})
Vue.use(VueJWT, JsonExcel)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
And i'm using the tag in the component I want to generate the Excel file.
What is the correct way to configure this using Vue with webpack like this?
The component fails in excel table, the values are not under the correct title.
I have used the component in 2 page, one of it is working correctly but in the other component, when the file is downloaded, the data fails.
I'm getting "The computed property "fields" is already defined as a prop." warning in Google Chrome.
Currently we can add only title (multiple or single). It would be better if we can customize our excel sheet further more. Add more headers (assigning them to the different cells), or some customized footers etc.
once a cell is 4 / 9, I'd like to show 4 / 9, just as text , but it will be parsed as date, showing 2018/4/9,
I suggest to extend the fields paramter to change json value from string to json.
current:
myFields: {
'Bussiness Text' : 'businessText'
}
suggestion:
myFields: {
'Bussiness Text' : {'businessText', '\@' }
}
after that, in the JsonExcel.vue, add corresponding style to table cell.
xlsData += '<td style="mso-number-format:\@;">' + item[key] + '</td>'
more style : http://cosicimiento.blogspot.com/2008/11/styling-excel-cells-with-mso-number.html
How to access nested JSON, I always get undefined result
Example json structure that I was tried to access
json_fields : {
"people.person.name": "name",
},
json_data : [
{
"people" : {"person": {"name": "Ravael"}}
},
{
"people.person.name": {"person": {"name": "Vue"}}
}
]
You get an error like this, because the key isn't the field label but the object with the field and callback properties
at VueComponent.getNestedData (JsonExcel.vue?ec10:214)
at eval (JsonExcel.vue?ec10:177)
at Array.map (<anonymous>)
at VueComponent.getProcessedJson (JsonExcel.vue?ec10:171)
at VueComponent.generate (JsonExcel.vue?ec10:76)
at invoker (vue.runtime.esm.js?2b0e:2023)
at HTMLDivElement.fn._withTask.fn._withTask (vue.runtime.esm.js?2b0e:1822)```
There is an error that only happens in explorer.
In the JonExcel.vue the method download has a parameter named fileName but it is used later on as filename (pay atention to the n that is in lowercase) and this provokes an error in explorer
best regards
[Vue warn]: The computed property "fields" is already defined as a prop.
Hello!
I think problem by window.location.href - length
https://stackoverflow.com/questions/15090220/maximum-length-for-url-in-chrome-browser
(test windows 10, chrome v.62...)
Thx!
Hi there!
Thanks for the lib!
It is very useful \o/
The meta tags were introduced on this commit: f9a8790
But this code seems to be absent of the current master source code.
It was intentional?
Do we need to update the documentation?
Can you check this issue?
Thanks in advance.
I have a problem with exporting a nested array attribute. It should be some child rows with others have rowspan beside them.
Any solution ?
When a field returns a boolean with the value false
, the output is empty.
For the following array: [ { emailVerified: false }, { emailVerified: false }, { emailVerified: true }]
The current output is:
| Email verified |
| |
| |
| TRUE |
The expected output is:
| Email verified |
| FALSE |
| FALSE |
| TRUE |
Current workaround is using .toString()
method.
Edit line 108:
var csvData = 'sep=,\r\n'
This will tell Excel to use the "," character as separator for the next lines. This first line is considered an instruction and not shown in your Excel sheet.
Line 114 in b8aaaed
That's the error I'm getting in the console on load. I can't open the downloaded file in drive or on mac preview either.
json_fields: {
reference_number: 'String',
location: 'String',
amount: 'Number',
severity: 'String',
original_part: 'String',
component: 'String',
component_manufacturer: 'String',
smc_replacement: 'String',
},
json_data: [],
json_meta: [[{ "key": "charset", "value": "utf-8"}]]
Those are the settings I'm using, the json_data is later populated.
Output Excel containing undefined does not look good, Can we have a prop in the component to set the default value , foe ex. "-" or "" or "N/A"
Hi @jecovier
I'm getting this error when I install the 0.2.4 version.
key.split is not a function
I see that the current master is different from the downloaded node_module source.
Can you check the npm published component?
Thanks in advance.
The CSV export feature won't escape commas within the data and thus is pretty badly broken.
Escaping in CSVs works as follows:
I have this sorted locally and will generate a PR for the fix momentarily.
Wanted to thank you for this package, installed and worked with almost no configs. Thanks a lot! No issues at all!
<download-excel :fetch="exportCompanies"
:fields="excelFields"
name="organizations.xls">
Download Excel
</download-excel>
```Function exportCompanies() is returning proper value still excelfile is not generating.
Why fields were written in Array type, I modified it to Array.
Tested with the sample data and the file shows correct headers but row data for each column prints out 'undefined'
name,city,country,birthdate,amount
undefined,undefined,undefined,undefined,undefined
Tried binding data to the footer attribute mentioned in the document but it is not processed.
//Vue code of json to excel
<download-excel class="pull-left btn btn-inverse waves-effect waves-light"
:title = "excel.excel_title"
:fields= "excel.excel_fields"
:data = "excel.excel_data"
footer = "Test"
:name = "excel.filename">
EXCEL
</download-excel>
//data declared
excel:{
excel_data:[],
excel_title:'',
excel_footer:'',
filename:'',
excel_fields:{},
},
I have calculated and seen to i that the data is binded to excel object and then to the json to excel element except for footer(I tried binding initially and later gave the value directly in the element).
Just execute the example provided in ReadMe - it'll show String/Number (means given Data Type for columns) in the header of downloaded excel file.
Why does it appear that the Blob class is not defined?
npm v5.5.0
vuejs v2.3.3
Hi,
Is there any way to export multiple sheet page in Excel?
Or is there a possible to stack data one after the other in the same page, with each its field and data?
Like an nested array for field and data will yield exported stacked on top of each other?
Thanks in advance,
Regards,
Julien
so i am exporting data of my registered user and there is id card number which contain 13 number ie.: 6112031505780002 and when i export it, in excel it show 6,11203E+15 and it is on general type of data and when i hover my cells into there, i see it is written as 611203150578000. so i lost the last charater...
how to make all of these number just to be a string without any formating? i find this is quite anoying, and it also turn all other fields that only contain number and into something like this 6,11203E+xx (xx = number) if the fields contains number that more then specific digit, i think after 9 or 10 digit it will turned into that...
how can i just get the plain string data?
Thanks for the lib!
When I try to open the excel file after downloaded, it always says
"The file format and extension of 'filename.xls" don't match. The file could be corrupted or unsafe. Unless you trust its source, don't open it. Do you want to open it anyway?"
I tried it in the origin code from Stackoverflow that you referred and it also shows the same message. Is there a way to get rid of it?
I am having issues with my field callbacks since 0.2.86. With fields defined like this:
'Desc': 'description',
'DescLen': {
field: 'description',
callback: (value) => {
return value.length;
}
},
The DescLen
field will return [object Promise]
in the excel file.
I have tried a few things, but I don't have a good enough grasp on async / await to fix it. If I revert back to 0.2.85 then it works fine.
It is not working when set charset
return new Blob([u8arr], {type: 'text/csv;charset=Shift_JIS'})
When used with Nuxt.js, got 'Unexpected token <'
{ /Users/name/Projects/project/node_modules/vue-json-excel/JsonExcel.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
^
SyntaxError: Unexpected token <
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
My data is huge
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.