How to use this package with Meteor JS? #277

New Issue

2015-07-24T03:48:49Z

thearabbit commented

2015-07-24 03:48:49 +00:00

(Migrated from github.com)

I want to use this with Meteor Js.
I try add the huaming:js-xlsx in meteor package, but don't how to use.
Please help me.

I want to use this with `Meteor Js`. I try add the `huaming:js-xlsx` in `meteor package`, but don't how to use. Please help me.

ThomsCass commented

2015-09-25 14:58:29 +00:00

(Migrated from github.com)

Have you got any results? I need to do the same thing...

ThomsCass commented

2015-09-25 15:18:17 +00:00

(Migrated from github.com)

try this line in your folder project
$ npm install xlsx

try this line in your folder project $ npm install xlsx

thearabbit commented

2017-05-23 10:36:32 +00:00

(Migrated from github.com)

have anyone help me for example?

SheetJSDev commented

2017-05-23 19:01:51 +00:00

(Migrated from github.com)

You should be able to use the npm module directly!

We don't use meteor but based on the documentation we were able to throw together something that appears to work. Basically we picked apart a few of the examples from the README and guessed where they needed to appear in the Meteor template.

You have to decide on the workload split (what do you want to do on the client and what do you want to do on the server?). This demo:

reads upload on client side, sends binary string to server, processes data on server side, sends workbook object to client, generates a JS object on the client side
generates workbook on server side, sends workbook object to client, generates file on client side and triggers a download.

But based on your preference, you can offload all of the work on the server or offload to the client.

Setup

You need to install xlsx and pfafman:filesaver:

$ npm install xlsx
$ meteor add pfafman:filesaver

My package.json:

{
  "name": "meteor-xlsx",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "^6.20.0",
    "meteor-node-stubs": "~0.2.4",
    "xlsx":"^0.10.3"
  }
}

Code

`server/main.js`

import { Meteor } from 'meteor/meteor';
/* npm install xlsx */
const XLSX = require('xlsx');

Meteor.methods({
	/* read the data and return the workbook object to the frontend */
	upload: (bstr, name) => { return XLSX.read(bstr, {type:'binary'}); },
	download: () => {
		/* this is the data we ultimately want to save */
		const data = [
			["a", "b", "c"],
			[ 1 ,  2 ,  3 ]
		];
		/* follow the README to see how to generate a workbook from the data */
		const ws = XLSX.utils.aoa_to_sheet(data);
		const wb = {SheetNames: ["Sheet1"], Sheets:{Sheet1:ws }};
		/* send workbook to client */
		return wb;
	}
});

Meteor.startup(() => { });

`client/main.html`

<head>
  <title>meteor-xlsx</title>
</head>

<body>
  <h1><a href="//sheetjs.com">SheetJS Meteor Demo</a></h1>
  <h3>Meteor Read Demo</h3>
  {{> read}}
  <h3>Meteor Write Demo</h3>
  {{> write}}
</body>

<template name="read">
  <label for="upload">Process File</label><input type="file" id="upload" />
</template>

<template name="write">
	<button>Generate Worksheet</button>
</template>

`client/main.js`

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

const XLSX = require('xlsx');
import './main.html';

Template.read.events({
	'change input' (evt, instance) {
		/* "Browser file upload form element" from SheetJS README */
		const file = evt.currentTarget.files[0];
		const reader = new FileReader();
		reader.onload = function(e) {
			const data = e.target.result;
			const name = file.name;
			/* Meteor magic */
			Meteor.call('upload', data, name, function(err, wb) {
				if(err) console.error(err);
				else {
					/* do something here -- this just dumps an array of arrays to console */
					console.log(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1}));
				}
			});
		};
		reader.readAsBinaryString(file);
	},
});

Template.write.events({
	'click button' (evt, instance) {
		Meteor.call('download', function(err, wb) {
			if(err) console.error(err);
			else {
				/* "Browser download file" from SheetJS README */
				var wopts = { bookType:'xlsx', bookSST:false, type:'binary' };
				var wbout = XLSX.write(wb, wopts);
				saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "meteor.xlsx");
			}
		});
	},
});

function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

Open the console to see data being sent back and forth.

You should be able to use the npm module directly! We don't use meteor but based on the documentation we were able to throw together something that appears to work. Basically we picked apart a few of the examples from the README and guessed where they needed to appear in the Meteor template. You have to decide on the workload split (what do you want to do on the client and what do you want to do on the server?). This demo: - reads upload on client side, sends binary string to server, processes data on server side, sends workbook object to client, generates a JS object on the client side - generates workbook on server side, sends workbook object to client, generates file on client side and triggers a download. But based on your preference, you can offload all of the work on the server or offload to the client. # Setup You need to install xlsx and `pfafman:filesaver`: ```js $ npm install xlsx $ meteor add pfafman:filesaver ``` My package.json: ```json { "name": "meteor-xlsx", "private": true, "scripts": { "start": "meteor run" }, "dependencies": { "babel-runtime": "^6.20.0", "meteor-node-stubs": "~0.2.4", "xlsx":"^0.10.3" } } ``` # Code ## `server/main.js` ```js import { Meteor } from 'meteor/meteor'; /* npm install xlsx */ const XLSX = require('xlsx'); Meteor.methods({ /* read the data and return the workbook object to the frontend */ upload: (bstr, name) => { return XLSX.read(bstr, {type:'binary'}); }, download: () => { /* this is the data we ultimately want to save */ const data = [ ["a", "b", "c"], [ 1 , 2 , 3 ] ]; /* follow the README to see how to generate a workbook from the data */ const ws = XLSX.utils.aoa_to_sheet(data); const wb = {SheetNames: ["Sheet1"], Sheets:{Sheet1:ws }}; /* send workbook to client */ return wb; } }); Meteor.startup(() => { }); ``` ## `client/main.html` ```js <head> <title>meteor-xlsx</title> </head> <body> <h1><a href="//sheetjs.com">SheetJS Meteor Demo</a></h1> <h3>Meteor Read Demo</h3> {{> read}} <h3>Meteor Write Demo</h3> {{> write}} </body> <template name="read"> <label for="upload">Process File</label><input type="file" id="upload" /> </template> <template name="write"> <button>Generate Worksheet</button> </template> ``` ## `client/main.js` ```js import { Template } from 'meteor/templating'; import { ReactiveVar } from 'meteor/reactive-var'; const XLSX = require('xlsx'); import './main.html'; Template.read.events({ 'change input' (evt, instance) { /* "Browser file upload form element" from SheetJS README */ const file = evt.currentTarget.files[0]; const reader = new FileReader(); reader.onload = function(e) { const data = e.target.result; const name = file.name; /* Meteor magic */ Meteor.call('upload', data, name, function(err, wb) { if(err) console.error(err); else { /* do something here -- this just dumps an array of arrays to console */ console.log(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1})); } }); }; reader.readAsBinaryString(file); }, }); Template.write.events({ 'click button' (evt, instance) { Meteor.call('download', function(err, wb) { if(err) console.error(err); else { /* "Browser download file" from SheetJS README */ var wopts = { bookType:'xlsx', bookSST:false, type:'binary' }; var wbout = XLSX.write(wb, wopts); saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "meteor.xlsx"); } }); }, }); function s2ab(s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; return buf; } ``` Open the console to see data being sent back and forth.

👍 2

thearabbit commented

2017-05-23 23:53:43 +00:00

(Migrated from github.com)

Very thanks, I will try soon

thearabbit commented

2017-05-24 04:25:02 +00:00

(Migrated from github.com)

Now it work fine.
Excuse me, could I generate excel file form excel template and pass data to it?

Now it work fine. Excuse me, could I generate `excel file` form `excel template` and pass data to it?

Sign in to join this conversation.