How to download on client? #354

mstrop · 2017-07-05T07:20:16Z

Is there a way, how to create a XLSX on a client and download it (send it as download file) without saving it or interacting with a server?

kirtiesl · 2017-07-06T09:15:38Z

Hello, looking for the same feature. Please update

gtskaushik · 2017-07-12T10:32:54Z

Yes it is possible.

Create the workbook and populate it with data

  res.attachment("test.xlsx")
  workbook.xlsx.write(res)
                .then(function() {
                    res.end()
            });

Here res is the response to the client

pleger · 2017-08-21T17:48:27Z

Hi, everyone,
I am a newest in this topic. Thereby, I couldn't understand the following code in the example:
res.attachment("test.xlsx");
What is res on the client? How can I create res?

Thanks, Paul

Amerzel · 2017-08-27T20:07:45Z

I think the previous commenter might have been confused about what was being asked. res indicates to me that they meant a node response sent back to the client. The original poster was asking for a way to create and download a file without using a server. I'd like this functionality as well and haven't been able to get it to work yet.

rojasjandro89 · 2017-08-29T19:02:17Z

Same here, I'm using angular, I have all I need in the client, it would be great if I could just download the file right from the client. So far all I've found has node's "res"

pleger · 2017-08-29T19:08:20Z

Hi, The following code works for me: ```js workbook.xlsx.writeBuffer().then(function (data) { var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); saveAs(blob, “fileName.xlsx"); }); ``` “saveAs” … I used “FileSaver.js”. Best, <http://pleger.cl/>

…

On 29Aug, 2017, at 16:02, rojasjandro89 ***@***.***> wrote: Same here, I'm using angular, I have all I need in the client, it would be great if I could just download the file right from the client. So far all I've found has node's "res" — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#354 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAq364JF88S7Zqf4eYVGo2gKPRtDQ-JTks5sdGBCgaJpZM4ON8rB>.

rojasjandro89 · 2017-08-29T19:21:39Z

It works for me too. Thanks a lot!

Mafi78 · 2017-08-29T19:35:49Z

Hi,
I've attached one working zip file in this incident: #322 perhaby cou can try that ?
Best regards
Manfred

Apollo081594 · 2018-01-02T09:59:16Z

@pleger do you example on how to download excel? i already used res.download. but still cant download the file. But it can do write excel

pleger · 2018-01-03T15:13:15Z

I hope the following code can help you!

extract from http://pleger.cl/gp

$(document).ready(function () {  
  | var workbook = new ExcelJS.Workbook();
  |  
  | workbook.creator = 'Paul Leger';
  | workbook.lastModifiedBy = 'Paul Leger';
  | workbook.created = new Date();
  | workbook.modified = new Date();
  | workbook.lastPrinted = new Date();
  |  
  | var worksheet = workbook.addWorksheet("Publications");
  | worksheet.views = [
  | {state: 'frozen', xSplit: 0, ySplit: 1}
  | ];
  |  
  | worksheet.autoFilter = {
  | from: 'A1',
  | to: 'M1'
  | };
  |  
  | worksheet.columns = [
  | { header: 'Index', key: 'Index', width: 15 },
  | { header: 'Title', key: 'title', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Authors', key: 'authors', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'Journal/Conference', key: 'jc', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Type', key: 'type', width: 12, style: {alignment: {wrapText: true} } },
  | { header: 'Year', key: 'year', width: 12, style: {numFmt: "0000"}},
  | { header: 'Month', key: 'month', width: 12},
  | { header: 'volume', key: 'volume', width: 12},
  | { header: 'number', key: 'number', width: 12},
  | { header: 'Pages', key: 'pages', width: 12},
  | { header: 'Location', key: 'location', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'doi', key: 'doi', width: 22, style: {alignment: {wrapText: true} } },
  | { header: 'affiliation', key: 'affiliation', width: 20, style: {alignment: {wrapText: true} } }
  | ];
  |  
  | var firstRow = worksheet.getRow(1);
  | firstRow.font = { name: 'New Times Roman', family: 4, size: 10, bold: true, color: {argb:'80EF1C1C'} };
  | firstRow.alignment = { vertical: 'middle', horizontal: 'center'};
  | firstRow.height = 20;
  |  
  |  
  | csv.shift();
  | worksheet.addRows(csv);
  |  
  | var buff = workbook.xlsx.writeBuffer().then(function (data) {
  | var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
  | saveAs(blob, "publications.xlsx");
  | });

Apollo081594 · 2018-01-04T01:56:16Z

Thanks you so much!

LiHaoGit · 2018-01-16T07:07:14Z

It works for me

koa2

export async function download(ctx: koa.Context) {
    const workbook = new Excel.Workbook()
    const worksheet = workbook.addWorksheet("report")
    worksheet.columns = [
      {header: "Date", key: "date", width: 20}]
    ctx.response.attachment("report.xlsx")
    ctx.status = 200
    await workbook.xlsx.write(ctx.res)
    ctx.res.end()
}

Messilimeng · 2018-04-09T06:11:48Z

@LiHaoGit 好啊我正在用这个插件可是一直下载不了能不能加个qq 咨询一下

shikhaBasra · 2018-04-17T12:15:16Z

xlsx.writeBuffer()
this code gives me error that function not exist

dlinx · 2018-11-29T11:32:16Z

To download on browser.

workbook.xlsx.writeBuffer().then(function (data: Blob) {
     const blob = new Blob([data],
       { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
     const url = window.URL.createObjectURL(blob);
     const anchor = document.createElement('a');
     anchor.href = url;
     anchor.download = 'download.xls';
     anchor.click();
     window.URL.revokeObjectURL(url);
   });

JarvisQJ · 2018-12-06T02:09:34Z

It works for me

koa2

export async function download(ctx: koa.Context) {
    const workbook = new Excel.Workbook()
    const worksheet = workbook.addWorksheet("report")
    worksheet.columns = [
      {header: "Date", key: "date", width: 20}]
    ctx.response.attachment("report.xlsx")
    ctx.status = 200
    await workbook.xlsx.write(ctx.res)
    ctx.res.end()
}

@LiHaoGit hi,how to receive and turn the data to excel file when you send data like this?

Siemienik · 2019-01-19T02:11:42Z

#269 #37

praveendev404 · 2019-05-06T11:35:56Z

res.status(200);
res.setHeader('Content-Type', 'text/xlsx');
res.setHeader(
'Content-Disposition',
'attachment; filename=test.xlsx'
);
workbook.xlsx.write(res)
.then(function () {
res.end()
});

chris-canipe · 2019-11-08T21:41:55Z

To download on browser.

workbook.xlsx.writeBuffer().then(function (data: Blob) {
     const blob = new Blob([data],
       { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
     const url = window.URL.createObjectURL(blob);
     const anchor = document.createElement('a');
     anchor.href = url;
     anchor.download = 'download.xls';
     anchor.click();
     window.URL.revokeObjectURL(url);
   });

I had to change anchor.click(); to anchor.dispatchEvent(new MouseEvent('click')); to get this working in Firefox. Thanks!

mateo2181 · 2020-03-17T11:24:09Z

Someone could do this sending the buffer from the backend (Node) ?

MeghaShrivastava · 2020-04-21T11:14:08Z

I hope the following code can help you!

extract from http://pleger.cl/gp

$(document).ready(function () {  
  | var workbook = new ExcelJS.Workbook();
  |  
  | workbook.creator = 'Paul Leger';
  | workbook.lastModifiedBy = 'Paul Leger';
  | workbook.created = new Date();
  | workbook.modified = new Date();
  | workbook.lastPrinted = new Date();
  |  
  | var worksheet = workbook.addWorksheet("Publications");
  | worksheet.views = [
  | {state: 'frozen', xSplit: 0, ySplit: 1}
  | ];
  |  
  | worksheet.autoFilter = {
  | from: 'A1',
  | to: 'M1'
  | };
  |  
  | worksheet.columns = [
  | { header: 'Index', key: 'Index', width: 15 },
  | { header: 'Title', key: 'title', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Authors', key: 'authors', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'Journal/Conference', key: 'jc', width: 25, style: {alignment: {wrapText: true} } },
  | { header: 'Type', key: 'type', width: 12, style: {alignment: {wrapText: true} } },
  | { header: 'Year', key: 'year', width: 12, style: {numFmt: "0000"}},
  | { header: 'Month', key: 'month', width: 12},
  | { header: 'volume', key: 'volume', width: 12},
  | { header: 'number', key: 'number', width: 12},
  | { header: 'Pages', key: 'pages', width: 12},
  | { header: 'Location', key: 'location', width: 20, style: {alignment: {wrapText: true} } },
  | { header: 'doi', key: 'doi', width: 22, style: {alignment: {wrapText: true} } },
  | { header: 'affiliation', key: 'affiliation', width: 20, style: {alignment: {wrapText: true} } }
  | ];
  |  
  | var firstRow = worksheet.getRow(1);
  | firstRow.font = { name: 'New Times Roman', family: 4, size: 10, bold: true, color: {argb:'80EF1C1C'} };
  | firstRow.alignment = { vertical: 'middle', horizontal: 'center'};
  | firstRow.height = 20;
  |  
  |  
  | csv.shift();
  | worksheet.addRows(csv);
  |  
  | var buff = workbook.xlsx.writeBuffer().then(function (data) {
  | var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
  | saveAs(blob, "publications.xlsx");
  | });

Hello,
My data is coming from API but after downloading the excel the data is not having proper sequence like the data which is in column 1 of my report is now coming in column 4 and so on.

I'm using calling data list and header like this:
generateExcel(){
this._http.generateExcel(this.headerInfo, this.spendclassificationlist);
}

Could you please suggest me how can I map my data with the proper header.

huy-lv · 2023-10-30T08:20:31Z

It works for me

koa2

export async function download(ctx: koa.Context) {
    const workbook = new Excel.Workbook()
    const worksheet = workbook.addWorksheet("report")
    worksheet.columns = [
      {header: "Date", key: "date", width: 20}]
    ctx.response.attachment("report.xlsx")
    ctx.status = 200
    await workbook.xlsx.write(ctx.res)
    ctx.res.end()
}

What about client side implementation?

rnzo mentioned this issue Mar 9, 2018

App crashed after stream closed. #500

Closed

Siemienik added duplicate resolved labels Jan 19, 2019

Siemienik closed this as completed Jan 19, 2019

Siemienik mentioned this issue Jan 26, 2021

Load and use xlsx in browser env [help wanted] #1055

Open

wpyoga mentioned this issue Jun 6, 2022

[BUG] Document type not recognized by browser if using string template literal as file name #2072

Closed

exceljs locked and limited conversation to collaborators Oct 31, 2023

Siemienik converted this issue into discussion #2576 Oct 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This issue was moved to a discussion.

How to download on client? #354

How to download on client? #354

mstrop commented Jul 5, 2017

kirtiesl commented Jul 6, 2017

gtskaushik commented Jul 12, 2017 •

edited by Siemienik

pleger commented Aug 21, 2017

Amerzel commented Aug 27, 2017

rojasjandro89 commented Aug 29, 2017

pleger commented Aug 29, 2017 via email •

edited by Siemienik

rojasjandro89 commented Aug 29, 2017

Mafi78 commented Aug 29, 2017

Apollo081594 commented Jan 2, 2018

pleger commented Jan 3, 2018

Apollo081594 commented Jan 4, 2018

LiHaoGit commented Jan 16, 2018

Messilimeng commented Apr 9, 2018

shikhaBasra commented Apr 17, 2018

dlinx commented Nov 29, 2018 •

edited

JarvisQJ commented Dec 6, 2018 •

edited

Siemienik commented Jan 19, 2019

praveendev404 commented May 6, 2019 •

edited

chris-canipe commented Nov 8, 2019

mateo2181 commented Mar 17, 2020

MeghaShrivastava commented Apr 21, 2020 •

edited

huy-lv commented Oct 30, 2023

This issue was moved to a discussion.

This issue was moved to a discussion.

How to download on client? #354

How to download on client? #354

Comments

mstrop commented Jul 5, 2017

kirtiesl commented Jul 6, 2017

gtskaushik commented Jul 12, 2017 • edited by Siemienik

pleger commented Aug 21, 2017

Amerzel commented Aug 27, 2017

rojasjandro89 commented Aug 29, 2017

pleger commented Aug 29, 2017 via email • edited by Siemienik

rojasjandro89 commented Aug 29, 2017

Mafi78 commented Aug 29, 2017

Apollo081594 commented Jan 2, 2018

pleger commented Jan 3, 2018

Apollo081594 commented Jan 4, 2018

LiHaoGit commented Jan 16, 2018

Messilimeng commented Apr 9, 2018

shikhaBasra commented Apr 17, 2018

dlinx commented Nov 29, 2018 • edited

JarvisQJ commented Dec 6, 2018 • edited

Siemienik commented Jan 19, 2019

praveendev404 commented May 6, 2019 • edited

chris-canipe commented Nov 8, 2019

mateo2181 commented Mar 17, 2020

MeghaShrivastava commented Apr 21, 2020 • edited

huy-lv commented Oct 30, 2023

This issue was moved to a discussion.

gtskaushik commented Jul 12, 2017 •

edited by Siemienik

pleger commented Aug 29, 2017 via email •

edited by Siemienik

dlinx commented Nov 29, 2018 •

edited

JarvisQJ commented Dec 6, 2018 •

edited

praveendev404 commented May 6, 2019 •

edited

MeghaShrivastava commented Apr 21, 2020 •

edited