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

182
Views
descargue pdf desde el html de una página web usando vue js

En mi aplicación, hay una opción para descargar pdf usando la entrada de URL del mismo dominio (sitio de intranet). Hay 3 páginas en mi aplicación ( http://example.com/about , http://example.com/home , http://example.com/htmltopdf )

En la página htmltopdf, hay un campo de entrada de texto y un botón para descargar pdf. Si le damos la URL de entrada ( http://example.com/about ), debería descargar el pdf del html de la página about. Para esto, he intentado un par de cosas, pero está convirtiendo pdf desde el index.html de la carpeta pública.

Estoy usando vue js en mi aplicación y lo he intentado así

Enfoque -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; },

Enfoque -2 (basado en la respuesta de otra publicación)

 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')); }

Para estos dos enfoques, está descargando el pdf de public/index.html, no el real. Después de verificar o buscar más, obtuve algunas sugerencias para usar titiritero o nuxt.js para esta descarga de pdf, pero no obtuve ningún ejemplo para este escenario. No estoy seguro de cómo hacer que esta función funcione en la plataforma vue.js o cómo usar titiritero en vue.js.

Revisé el paquete vue-htmltopdf npm, pero ¿cómo enviar la URL directamente allí para descargar el pdf?

Por favor, dame una sugerencia o un ejemplo de cómo descargar pdf desde la entrada de URL dada del mismo dominio.

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!