How to check if the PDF is blank in Angular JS? - javascript

Here is the code that loads the pdf file and download it:
$http.get('/retrievePDFFile', {responseType: 'arraybuffer'})
.success(function (data) {
var file = new Blob([data], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
});
For some reason, I want to check if the pdf is not blank before it gets downloaded. I don't want to download an empty pdf.
Or someone can tell me, how to convert PDF Stream to json or text, would be great.

Related

Using blob to make .docx file from md input?

I am trying to create a custom Word document output using Hogan and Blob. It works as expected for .md files but I am trying to generalize to .docx or other file types.
From following an online tutorial this is what I have so far:
app.markdown = app.template.render(data);
updateLink(
app.markdown,
"text/plain",
"example.md",
document.getElementById("mdLink")
);
app.markdown is valid markdown as expected. And this is the updateLink function:
function updateLink(content, contentType, filename, link) {
const blob = new Blob([content], { type: contentType });
const url = window.URL.createObjectURL(blob);
window.URL.revokeObjectURL(link.href);
link.href = url;
link.download = filename;
}
So, the above works for .md files, but when I try changing "example.md" to "example.docx" and "text/plain" to "application/msword", and clicking the link results in a .docx file being downloaded but Word is not able to open the content. So what format do I need to convert my markdown to so that it works natively with Word? (Ideally I would also be able to preserve some of the markdown styling into the Word styling). Thanks!

New window and incorrect filename when saving data as CSV file

I am getting some CSV data from an Ajax request. I am trying to use FileSaver.js (https://github.com/eligrey/FileSaver.js/) to enable the end-user directly download this data as a CSV file.
This is the code used in my Ajax request handler.
jQuery.post(urlPrefix + "/api/ReportData",
dataToPost,
function (data, status) {
var blob = new Blob([data], { type: "text/csv" });
var fileName = "";
fileName += "Data-Export";
fileName += ".csv";
saveAs(blob, fileName);
});
This code is called from a button click event. Whenever the code executes, a new tab is opened, and the file is saved without a csv extension. In fact, the downloaded file has no extension at all. See the attached screenshot for details. The (7) is due to this being my seventh download.
The actual file that is saved is a valid file. If I manually set its extension to csv, I can use it properly. But I want to know how to use FileSaver to generate appropriate extension, and also download the file without opening a new tab.
What I have already tried
Export to CSV using jQuery and html
I found out this link https://code-maven.com/create-and-download-csv-with-javascript where it is possible to create a hidden anchor tag and download the file.
My new code is below
jQuery.post(urlPrefix + "/api/ReportData",
dataToPost,
function (data, status) {
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(data);
hiddenElement.target = '_blank';
hiddenElement.download = 'Exported-Data.csv';
hiddenElement.id = "customTemporaryAnchor";
hiddenElement.click();
jQuery("#customTemporaryAnchor").remove();
});
When this code is executed, the file downloads with proper extension, and without any popup or new tab.

return pdf instead of pdf url from laravel

I am using laravel. I don't want to return url of the pdf to the front-end, as it's located in google cloud and i don't want the link to be seen. That's why I need to return pdf directly and let user download it through browser.
I tried this:
return response()->json(['data' => file_get_contents(Storage::url($cert_path))]);
//this says: malformed utf-8 characters, 500 error
Then I googled and tried this:
$file = file_get_contents(Storage::url($cert_path));
$file = mb_convert_encoding($file, 'HTML-ENTITIES', "UTF-8");
return response()->json(['data'=>$file]);
//this returns pdf, but in front, when i have a download code of js, when I download it, the whole pdf is empty.
The url of the pdf is correct, as I can go to that url and see the pdf.
how do I return pdf successfully?
I will also include javascript download code:
var blob = new Blob([pdf], {
type: 'application/pdf'
});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "ffa.pdf";
link.click();

Download base64 PDF

I am receiving from the server the following response:
Object {
$type: "base64",
$data: "JVBERi0xLjQK..."
}
I try to autodownload it with FileSaver.js
let arrayBuffer = atob(response.$data);
let blob = new Blob([arrayBuffer], {type: "application/pdf;charset=utf-8"});
saveAs(blob, 'myfile.pdf');
A PDF is generated, and downloads (it has the same page number as the original on the server), but is empty.
However this works:
window.open("data:application/pdf;base64," + response.$data);
It opens the PDF with its content.

jQuery- Open pdf in new tab with file name

Im getting a pdf back from a databse as a blob object and want to display the pdf back to the browser with a file name.
I get the file back no problem and able to display in new tab, but file name looks like --> 64CB13D-ec93-48fa-a425-0b66n3fg
How can i force a file name?
function(response){
if(response.data && response.status==200){
var fileContent = response.data;
var file = new Blob([fileContent], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
window.open(fileURL, '_blank');
I think you can just use HTML for this purpose, see my answer here: Display PDF stream returned from controller using jquery in new window
And add, server-side, the following header:
Content-Disposition: attachment; filename="the-name-you-want.pdf"
See: https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Disposition

Categories

Resources