I would like to use jsreport browser to send data to the server and download it back as xlsx file.
Using jsreport.download(request) would limit the amount of data cause it is a GET. Can I use jsreport.renderAsync() to download a xlsx file just like with pdf?
jsreport.renderAsync returns in promise ArrayBuffer. You can convert it to blob and then use saveAs to download it to the user computer.
<script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
<script>
jsreport.renderAsync({
template: {
content: '<table><tr><td>foo</td></tr></table>',
engine: 'none',
recipe: 'html-to-xlsx'
}
}).then(function (res) {
var dataView = new DataView(res);
var blob = new Blob([dataView], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
saveAs(blob, 'a.xlsx')
})
</script>
https://playground.jsreport.net/studio/workspace/HJ0z0yaY/8
Related
I am using Accounts.emailTemplates.enrollAccount.html.
I can send e-mail successfully using this code:
Accounts.emailTemplates.enrollAccount.html = function(user, url) {
return '<h1>Thank you </h1><br/>Verify eMail';
};
But what I want to do is, I have one external file called email.html and I want to send that file as an e-mail.
My code
Accounts.emailTemplates.enrollAccount.html = function(user, url) {
// i want to send email.html file from here or if you have other way
};
Thank You.
You can use the meteor package meteorhacks:ssr like that :
Accounts.emailTemplates.enrollAccount.html = function(user, url) {
SSR.compileTemplate('htmlEmailVerify', Assets.getText('email.html'));
return SSR.render('htmlEmailVerify', {user: user, url: url});
};
And you can get the data inside the email html code with spacebars tags :
{{user}} & {{url}}
I want to export extjs grid content to excel file. So what i have done already:
i send to the servlet json content of the grid through Ext.Ajax.request, like
Ext.Ajax.request({
url : 'ExportToExcel',
method:'POST',
jsonData: this.store.proxy.reader.rawData,
scope : this,
success : function(response,options) {
this.onExportSuccess(response, options);
},
//method to call when the request is a failure
failure: function(response, options){
alert("FAILURE: " + response.statusText);
}
});
Then in servlet i get json in servlet do some stuff, e.g. create excel file, convert it to bytes array and try to put into response.
In Ext.Ajax.request in success method when i try to do something like this:
var blob = new Blob([response.responseText], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet});
var downloadUrl = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = downloadUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
it downloads excel file, but when i open it error occurs, saying format or extension is invalid.
WHY??
Whether it may depend on the encoding?
What i'm doing wrong?
Ext comes with an excel exporter built in. You may want to try using that to see if you get the desired results
grid.saveDocumentAs({
type: 'excel',
title: 'My Excel Title',
fileName: 'MyExcelFileName.xml'
});
From the toolkit : Ext.grid.plugin.Exporter
I am sending a request from my Meteor server to download a file via an API. I then want to upload that file to S3. I keep getting the following "NoSuchKey: The specified key does not exist." I initially thought it was maybe a problem with my AcessKey/SecretKey form AWS but after googling this for a while the only examples I could find of other people getting this error is when trying to download a file from S3.
Setting up cfs:s3
var imageStore = new FS.Store.S3("images", {
accessKeyId: "MyAcessKeyId", //required if environment variables are not set
secretAccessKey: "MySecretAcessKey", //required if environment variables are not set
bucket: "BucketName", //required
});
Images = new FS.Collection("images", {
stores: [imageStore]
});
Start file transfer from API and upload to S3
client.get_result(id, Meteor.bindEnvironment(function(err, result){ //result is the download stream and id specifies which file to download.
if (err !== null){
return;
}
var file = new FS.File(result);
Images.insert(file, function (err, fileObj) {
if (err){
console.log(err);
}
});
}));
Note: I was getting the following error so I added Meteor.bindEnvironment.
"Meteor code must always run within a Fiber. Try wrapping callbacks that you pass to non-Meteor libraries with Meteor.bindEnvironment."
Node.js example from API Documentation
client.get_result(id, function(err, result){
if (err != null) {
return;
}
file.writeFile(path.join('public', path.join('results', filename)), result, 'binary');
});
What ended up fixing the problem for me was moving part of the setup to the lib folder. Although I tried several different ways I was unable to get it to execute entirely on the server. It looks like the documentation was updated recently which states everything a bit more clearly. If you follow this setup it should eliminate the error. See the section titled Client, Server, and S3 credentials
https://github.com/CollectionFS/Meteor-CollectionFS/tree/master/packages/s3
Note: Make sure not to place you secret key is not in you lib folder as this is accessible from the client.
I've added the packages cfs:standard-packages and cfs:filesystem to my meteor project.
I want to upload featured images for my blog using a form with this input.
<div class="form-group">
<label for="featuredImage">Featured Image</label>
<input type="file" id="fImage" required>
<p class="help-block">Please choose an image file.</p>
</div>
And the event javascript
Template.AddPost.events({
'change #fImage': function(event, template) {
var image = template.find('[id=fImage]').value;
var lastIndex = image.lastIndexOf("\\");
if (lastIndex >= 0) {
image = image.substring(lastIndex + 1);
}
if (!image.match(/\.(jpg|jpeg|png|gif)$/)) {
alert("not an image");
} else {
FS.Utility.eachFile(event, function(file) {
var fileObj = new FS.File(file);
Meteor.call('uploadFeaturedImage', fileObj);
});
}
}
});
The 'uploadFeaturedImage' method on the server is
Meteor.methods({
'uploadFeaturedImage': function(fileObj){
Uploads.insert(fileObj, function(err){
console.log(err);
});
}
});
When i choose an image file to upload i get this error -
"Exception while invoking method 'uploadFeaturedImage' Error: DataMan constructor received data that it doesn't support"
Anyone have any ideas why this is happening? Thank you.
I copied some explanation from the collectionFS documentation because it is really good described there.
When you need to insert a file that's located on a client, always call myFSCollection.insert on the client. While you could define your own method, pass it the fsFile, and call myFSCollection.insert on the server, the difficulty is with getting the data from the client to the server. When you pass the fsFile to your method, only the file info is sent and not the data. By contrast, when you do the insert directly on the client, it automatically chunks the file's data after insert, and then queues it to be sent chunk by chunk to the server. And then there is the matter of recombining all those chunks on the server and stuffing the data back into the fsFile. So doing client-side inserts actually saves you all of this complex work, and that's why we recommend it.
Have a look at HERE
So your method is not working because no data is sent to the server.
I'm encountering issues with a dashlet that I'm trying to develop for Alfresco. It's a simple drag and drop file upload dashlet using HTML 5's drag and drop and file APIs. For the drop event listener, I call the following function which is seemingly the cause of all the problems:
function handleFileSelect(evt) {
var files = evt.target.files || evt.dataTransfer.files,
tmpForm, tmpDest, tmpMeta, tmpType, tmpName, tmpData;
dropZone.className = "can-drop";
evt.stopPropagation();
evt.preventDefault();
for (var i=0,f;f=files[i];i++) {
tmpForm = document.createElement('form');
tmpDest = document.createElement('input');
tmpDest.setAttribute('type', 'text');
tmpDest.setAttribute('name', 'destination');
tmpDest.setAttribute('value', destination);
tmpForm.appendChild(tmpDest);
tmpMeta = document.createElement('input');
tmpMeta.setAttribute('type', 'text');
tmpMeta.setAttribute('name', 'mandatoryMetadata');
tmpMeta.setAttribute('value', window.metadataButton.value);
tmpForm.appendChild(tmpMeta);
tmpType = document.createElement('input');
tmpType.setAttribute('type', 'text');
tmpType.setAttribute('name', 'contenttype');
tmpType.setAttribute('value', "my:document");
tmpForm.appendChild(tmpType);
tmpName = document.createElement('input');
tmpName.setAttribute('type', 'text');
tmpName.setAttribute('name', 'filename');
tmpName.setAttribute('value', f.name);
tmpForm.appendChild(tmpName);
tmpData = document.createElement('input');
tmpData.setAttribute('type', 'file');
tmpData.setAttribute('name', 'filedata');
tmpData.setAttribute('value', f);
tmpForm.appendChild(tmpData);
Alfresco.util.Ajax.request({
url: Alfresco.constants.PROXY_URI_RELATIVE + "api/upload",
method: 'POST',
dataForm: tmpForm,
successCallback: {
fn: function(response) {
console.log("SUCCESS!!");
console.dir(response);
},
scope: this
},
failureCallback: {
fn: function(response) {
console.log("FAILED!!");
console.dir(response);
},
scope: this
}
});
}
}
The server responds with a 500, and if I turn on debug level logging for web scripts, upload.post returns with:
DEBUG [repo.jscript.ScriptLogger] ReferenceError: "formdata" is not defined.
Which, to me at least, indicates that the form above isn't getting submitted properly (if at all). When digging through it all with Chrome dev tools, I notice that that request payload looks drastically different from something such as a REST client. The above code results in the request using Content-Type: application/x-www-form-urlencoded whereas using a REST client, or Alfresco Share's standard uploader(s) are using Content-Type: multipart/form-data. If I need to submit the form using multipart/form-data, what is the easiest way to write out the request body (with the boundaries, Content-Disposition's, etc...) to include the file being uploaded?
I ditched the idea of creating a form HTML Element through javascript, and assume that if a browser supports the File API, and the Drag and Drop API, that they will likely also support the XMLHttpRequest2 API. As per HTML5 File Upload to Java Servlet, The above code now reads:
function handleFileSelect(evt) {
var files = evt.target.files || evt.dataTransfer.files,
xhr = new XMLHttpRequest();
dropZone.className = "can-drop";
evt.stopPropagation();
evt.preventDefault();
for (var i=0,f;f=files[i];i++) {
formData = new FormData();
formData.append('destination', destination);
formData.append('mandatoryMetadata', window.metadataButton.value);
formData.append('contenttype', "my:document");
formData.append('filename', f.name);
formData.append('filedata', f);
formData.append('overwrite', false);
xhr.open("POST", Alfresco.constants.PROXY_URI_RELATIVE + "api/upload");
xhr.send(formData);
}
}
with the necessary event listeners to be added later. It would seem that the Alfresco AJAX methods that come stock and standard heavily modify the underlying requests being made, making it very difficult for one to simply send a FormData() object.