Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

176
Views
download pdf from a web page's html using vue js

In my application, there is an option to download pdf using URL input of same domain(intranet site). There are 3 pages in my application(http://example.com/about, http://example.com/home, http://example.com/htmltopdf)

In htmltopdf page, there is a text input field and button download pdf. If we give input url (http://example.com/about), It should download pdf of about page's html. For this, i have tried couple of things but it is converting pdf from the index.html of public folder.

I am using vue js in my application and i have tried like this

Approach -1

    downloadHtml() {
  let url = this.urlInput;  // input text v-model value
  fetch(url)
    .then((res) => res.text())
    .then((html) => this.downloadAsFile("report.pdf", 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,${content}' + encodeURIComponent(document.documentElement.outerHTML);
  link.target = '_blank';
  link.download = fileName;
  return link;
},

Approach -2 (based on answer of another post)

    async fetchHTML() {
   let url = this.urlInput
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.pdf');
document.body.appendChild(a);
a.dispatchEvent(new MouseEvent('click'));

} 

For these two approaches, it is downloading the pdf of public/index.html not the actual one. After checking or searching more, i got some suggestions to use puppeteer or nuxt.js for this downloading pdf but i didn't get that any example for this scenario. I am not sure how to do this function workable in vue.js platform or how to use puppeteer in vue.js?

I have checked vue-htmltopdf npm package but how to send URL directly there to download pdf?

Please give me suggestion or example how to download pdf from given URL input of same domain?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!