I am using 'exceljs' module in my Angular project to build an Excel file.
Instead of exporting it as Excel file, I would first like to convert it to PDF and then download it as such.
I can successfully export and save this file to my computer:
workbook.xlsx.writeBuffer().then((data) => {
console.log(data); // Uint8Array
console.log(data.buffer); // ArrayBuffer
console.log(new Blob([data])); // Blob
// code I use to export it as an Excel File
const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'});
const test = FileSaver.saveAs(blob, 'test.xlsx');
});
As written above, instead of an Excel file I would like to have it exported as a PDF file.
From the code you can see that 'exceljs' is giving me an Uint8Array stream of data, from which I can get out an ArrayBuffer, or I can convert it to a Blob.
I have tried using this without success:
workbook.xlsx.writeBuffer().then((data) => {
const blob = new Blob([data], { type: 'application/pdf' });
// or with 'application/octet-stream' type
// const blob = new Blob([data], { type: 'application/octet-stream' });
FileSaver.saveAs(blob, 'test.pdf');
});`
The PDF file gets exported, but it cannot be opened.
I get an error like "The file is corrupted."
Thank you for all the help in advanced.
Related
-Hi community!
I'm working in WIX Velo and trying to write a code that creates a VCF file and then lets the user download it by clicking a button. Currently, I'm stuck with the following code version below that creates a VCF file (checked it in the console) but didn't run the download function:
import VCard from 'vcard-creator';
import { saveAs } from 'file-saver';
function createAndDownloadVCF() {
// Create the VCard data
const card = new VCard();
card.addName('Doe', 'John');
card.addEmail('john.doe#example.com', 'INTERNET');
card.addPhoneNumber('123-456-7890', 'WORK');
// Convert the VCard data to a Blob object
const blob = new Blob([card.toString()], { type: 'text/vcard' });
// Save the Blob object as a file
saveAs(blob, 'contact.vcf');
// Log the full VCard data to the console
console.log(card.toString());
}
$w('#downloadButton').onClick(() => {
createAndDownloadVCF();
});
Can anyone suggest what might be done to fix it?
Big thanks in advance!
I've also tried using the 'window' object to run the VCF file download and used the code below but always have an error: Unhandled Promise Rejection: ReferenceError: Can't find variable: window
// Convert the VCard data to a Blob object
const blob = new Blob([card.toString()], { type: 'text/vcard' });
// Create a URL for the Blob object
const blobUrl = URL.createObjectURL(blob);
// Open the URL in a new browser window
window.open(blobUrl, '_blank');
I'm trying to retrieve an image (or file), then convert it to base64 on Nodejs.
I don't want to download and save the file. I've tried this:
const fileURL = "https://media.istockphoto.com/vectors/sample-sign-sample-square-speech-bubble-sample-vector-id1161352480?k=20&m=1161352480&s=612x612&w=0&h=uVaVErtcluXjUNbOuvGF2_sSib9dZejwh4w8CwJPc48=";
const file = await httpPromise({
uri: fileURL,
method: 'GET'
});
const base64 = new Buffer(file).toString('base64');
console.log(base64);
But this doesn't work. How can make it?
I want to preview a file in another browser tab by clicking on a file which I uploaded before.
It's working fine with {type:'application/pdf'} or {type: 'image/jpeg'} but I need both of them.
Is there a way to set more than one type for a Blob?
When i get the Dokument from the Backend I don't geht the type of the file. So I can't check either a File is pdf or a jpeg.
const fileOpen = new Blob([response], {type: 'image/jpeg' }); // this works fine!! but i need to open a pdf file as well.
const fileUrl = URL.createObjectURL(fileOpen);
window.open(fileUrl);
If response is a Fetch API Response object, you can set the type of Blob according to the type of response:
const fileOpen = new Blob([response], {type: response.data.type });
const fileUrl = URL.createObjectURL(fileOpen);
window.open(fileUrl);
I have public url to XLSX file.
It is something like:
http://example.com/myfile.xslx
I'm trying to download this file and store it on my PC.
So what I'm doing is making a GET request to http://example.com/myfile.xslx and getting the content of the file and store it in a file.
this.http.get('http://example.com/myfile.xslx', { responseType: 'blob' })
.subscribe((response) => {
console.log(response); // this returns {size: 508079, type: "application/xlsx"}
// here goes the code for writing content into file
});
The problem is I can't get the content of the file.
What I can get is only an object:
{ size: 508079, type: "application/xlsx" }
Any advice is welcome.
How, I solved it:
this.http.get('http://example.com/myfile.xslx', { responseType: 'blob' })
.subscribe((response) => {
console.log(response); // this returns {size: 508079, type: "application/xlsx"}
// here goes the code for writing content into file
const reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = (data) => {
const csvData = reader.result;
console.log(csvData); // here I get contect of file using file reader
});
So solution was in FileReader().
Whats going on
What your getting is probably a Blob, a Blob has these 2 properties (size and type), however it has some methods to read its contents.
.XSLX files are not text files but binary files, and they can't be easily read like text files.
Possible solutions
If it makes sense in your case you can use .CSV format instead of .XLSX, CSV files are text files and can be read with the blob.text() method.
You can try to read and write to it with a JavaScript-xslx library
like js-xlsx from SheetJS, or something similar.
With js-xlsx it would be something like this:
this.http.get('http://example.com/myfile.xslx', { responseType: 'arraybuffer' })
.subscribe((response) => {
let xslx = XLSX.read(response, {type:"array"});
console.log(xslx);
// here goes the code for writing content into file
})
the following code downloads a file that can't be opened(corrupt) and I have absolutely no idea why. I've tried this in so many ways but it never works, it always produces a corrupt file. The original file isn't the problem because it opens fine. I'm trying to open mp4, mp3, and image files.
//$scope.fileContents is a string
$scope.fileContents = $scope.fileContents.join(",");
var blob = new Blob([$scope.fileContents], {type: $scope.file.fileDetails.type});
var dlURL = window.URL.createObjectURL(blob);
document.getElementById("downloadFile").href = dlURL;
document.getElementById("downloadFile").download = $scope.file.fileDetails.name;
document.getElementById("downloadFile").click();
window.URL.revokeObjectURL(dlURL);
You need to download the file contents as binary using an ArrayBuffer e.g.
$http.get(yourFileUrl, { responseType: 'arraybuffer' })
.then(function (response) {
var blob = new Blob([response.data], {type: $scope.file.fileDetails.type});
// etc...
});
Sources:
angular solution
plain javascript solution