How to make a pdf generator ? (postcard) - javascript

I'm willing to invite all my friends to my wedding, I have all the addresses in an Excel and I made a postcard in html using jQuery and urlParams to make every postcard personal.
Now I am stuck at the point where I want to turn all the pages into PDFs to print them (I'd like to have one big PDF with page 1 guy1 front, page 2 guy1 back, page 3 guy2 front and so on...)
I've tried with jspdf like this:
var doc = new jsPDF('landscape','pt');
doc.fromHTML(documtent.body,100,100,{});
doc.save('bigpdf');
but it gets my html all messed up and it doesn't look like on browser (and it has no background)
I've also tried html2canvas:
html2canvas(document.body).then(canvas => {
saveAs(canvas, 'bigpdf');
});
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
but the downloaded file has no <p> tag on it nor QR code (I made a qr code to track who is coming)
I hope you'll find my solution
Many thanks in advance

Related

downloaded html page not opening in chrome or edge but in IE and giving noscript error - vue application

In my application, i am trying to download html of current page which is with same domain name. I have written some method to download the html and it is downloading.
But, i have tried to open it in chrome as well as edge and it is not opening. But, in IE it is opening and displaying text of noscript tag (We're sorry but app doesn't work properly without JavaScript enabled.Please enable it to continue.).
I am inputting intranet site URL and clicking the download button. Here is my method below.
downloadHtml() {
let url = this.urlInput; // input text v-model value
fetch(url)
.then((res) => res.text())
.then((html) => this.downloadAsFile("report.html", html)); // by this name it is downloading
},
downloadAsFile(name, text) {
const link = this.createDownloadableLink(name, text);
const clickEvent = new MouseEvent("click");
link.dispatchEvent(clickEvent);
},
createDownloadableLink(fileName, content) {
let link = document.createElement("a");
link.href = 'data:attachment/text,' + encodeURIComponent(document.documentElement.outerHTML);
link.target = '_blank';
link.download = fileName;
return link;
},
**The problems are :
1. The app root signifies the public/index.html and that downloaded html is this one not the current page's html.
2. Chrome or Edge is not opening that html page even i checked browser is javascript enabled.
So, what i have to change the download the current page html?
The problem is that an HTML file in not an application/octet-stream file type. The mime type of an HTML page is text/html
I'm unsure of the way you try to create your download link. I don't have time to test it, but there is the way I do it usually using the createObjectURL API :
async function fetchHTML(url) {
let content = await fetch(url).then(resp => resp.text());
let file = new Blob([content],{type:'text/html'});
let href = window.URL.createObjectURL(file);
let a = document.createElement('a');
a.href = href;
a.setAttribute('download', 'report.html');
document.body.appendChild(a);
a.dispatchEvent(new MouseEvent('click'));
}
Another problem is that you don't append your link into the DOM in the code you provided. So the DOM cannot trigger your mouse event and so starting the download (it's needed by some browsers).
With the good mime type, the file in a proper format and a link in to the dom, it should be ok.

How can I download a pdf from a url using javascript?

I need to download pdf's from one of our online resources.There is no built in function to batch download.The only way to do it is to navigate to each pdf file, click to open, then click download.
There are several thousand files and this would take a very long time to do.
I got around this in the past using javascript. I gathered all the links to the pdfs, put them in a csv, and had the code loop through each link, download, and move onto the next link.
Unfortunately, I have lost that code and my efforts to recreate it have been unsuccessful.
I have tried everything in this article: How to download PDF automatically using js?
I have tried the code from this article (which I'm pretty sure is what I did before): https://www.convertplug.com/plus/docs/download-pdf-file-forcefully-instead-opening-browser-using-js/
This is what I think should work...per the second article I referenced above
function download_file(fileURL, fileName) {
var link = document.createElement('a');
link.href = fileURL;
link.download = 'file.pdf';
link.dispatchEvent(new MouseEvent('click'));
}
var fileURL = "link/to/pdf";
var fileName = "test.pdf";
download(fileURL,fileName);
The code above is just to test download one file from a hardcoded URL. If it worked as intended, when the page is loaded, it should download the pdf from the provided url. Instead, it doesn't do anything on load or refresh.
Any suggestions?
Please check
https://stackoverflow.com/a/18983688/6923146
click me
Another one
https://stackoverflow.com/a/45905238/6923146
function download(url, filename) {
fetch(url).then(function(t) {
return t.blob().then((b)=>{
var a = document.createElement("a");
a.href = URL.createObjectURL(b);
a.setAttribute("download", filename);
a.click();
}
);
});
}
download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,Hello Developer!", "HelloDeveloper.txt");
I hope it helpfull
https://www.convertplug.com/plus/docs/download-pdf-file-forcefully-instead-opening-browser-using-js/
You must add link element to DOM
function download_file(fileURL, fileName) {
var link = document.createElement('a');
link.href = fileURL;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
var fileURL = "https://cdn.sstatic.net/clc/img/jobs/bg-remote-header-sm.png";
var fileName = "test.pdf";
download_file(fileURL, fileName); // fix function name
Link must be in same origin
The download attribute on anchor was ignored because its href URL has a different security origin.

Saving page as html file from button

I have been hunting around on these forums to find some code which can download the HTML page AS IS (i.e. with added elements from other buttons, and essentially everything within my div's) so that it can be picked up another time with the data still there. I cannot for the life of me find anything which just downloads the page. Below is the closest I came to actually saving a html document at all, and even that (obviously) only displays the text written. Could I edit this to make it encapsulate the entire page?
With very little experience I can only apologize.
function save() {
var anchor = document.querySelectory('button');
anchor.setAttribute('download', 'index.html');
anchor.setAttribute('href', 'data:text/html;charset=UTF-8,<p>asdf</p>')
}
One solution is FileSaver.js
Follow the example on that page, and use document.innerHTML for your blob (what I've used) Actually, I forget if that excludes the header. If so, there's a solution I found to this (also on StackOverflow) but I don't have the code here locally to look at how I got around this (if I did, indeed, have to get around this)
You can try this
download html content
<script>
function myFunction() {
var content = document.documentElement.innerHTML;
download(content, "index", "txt")
}
function download(content, fileName, fileType) {
var link = document.getElementById("donwload-link");
var file = new Blob([content], {type: fileType});
var donwloadFile = fileName + "." + fileType;
link.href = URL.createObjectURL(file);
link.download = donwloadFile
}
</script>
https://jsfiddle.net/a9oLw1zv/13/

How can I use download a .zip file from a URL to the user in Angular 4?

I have about 10 .csv and 10 .xlsx files of sale items that are each zipped and and deployed daily at a URL specified by an API get request I make depending on which file the user wants to download.
So basically, when I call the API, I get back a string of the destination URL, and it's hot, so if you navigate to that url, the file downloads for the user, however this is how I'm doing it, and I'm wondering if there is a better way, or an Angular way?
Here is the response I get the URL from the API get request when the user changes a radio button for the file they want:
{
"fileUrl": "https://example.com.csv.zip"
}
Then I'm using #ngrx store to set that destination URL in state. I won't go into that here...
Here is the method that is called when the user clicks the download button:
downloadCSV() {
const url = this.state.destinationUrl;
this.http.get(url).subscribe(res => {
// Don't like modifying the DOM just to download a file :(
const link = document.createElement('a');
link.download = this.state.destinationUrl;
link.href = this.state.destinationUrl;
document.body.appendChild(link);
// Don't like forcing an event :(
link.click();
}, (error) => {
console.log('error fetching file download');
});
}
The problem is, this seems hacky, and I am looking for a better solution. Is there a better way of doing this, keeping in ind that I want to avoid popup blockers? I have seen file-saver used in Angular but I don't think I can create a Blob out of the .zip file location and us FileSaver.saveAs(blob, 'example.zip'). Any suggestions would be greatly appreciated.
download() {
const url = 'mydomain.com';
if (url) {
const link = document.createElement('a');
link.href = url;
document.body.appendChild(link);
link.click();
}
}

Unable to export .csv file in IE browser

I'm trying to export my data as CSV file. I wrote below code, that is working fine in Firefox/Chrome but not in IE. I need to make work in IE8/9/10 versions. Thanks in advance.
JS code:
var CSVgen = function (CSV, ReportName) {
//Generate a file name if empty is replace by _.
var fileName = ReportName.replace(/ /g,"_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;Content-Type:application/octet-stream;Content-Disposition: attachment;charset=utf-8,' + escape(CSV);
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
And i tried below ways also:
var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
and
var uri = 'Content-Type:application/octet-stream;Content-Disposition:
attachment;' + escape(CSV);
But no luck. I'm getting below error page in IE:
The webpage cannot be displayed
Most likely cause:
•Some content or files on this webpage require a program that you don't have installed.
What you can try:
Search online for a program you can use to view this web content.
Retype the address.
Go back to the previous page.

Categories

Resources