Vue.js生成包含HTML内容的PDF。

huangapple go评论73阅读模式
英文:

Vue.js generate pdf with html content

问题

有没有一些机会可以从HTML内容生成PDF。我的意思是类似于打印成PDF。我需要使用非常复杂的带有技术绘图(绝对位置等)的HTML,我需要获取整个Vue文件模板并生成PDF。

英文:

Is there some chance to generate PDF from HTML content. I mean something like print to PDF. I need to use very difficult html with technical draws (absolute positions, etc) and I need to take whole Vue file template and generate PDF.

答案1

得分: 1

这可以通过使用jspdf库来实现。

示例代码:

<div id="html">My HTML</div>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>

<script>
    var pdf = new jsPDF('p', 'pt', 'a4');
    pdf.html(document.getElementById('html'), {
        callback: function (pdf) {
            pdf.save('a4.pdf');
        }
    });
</script>
英文:

This can be achieve with the jspdf library

http://raw.githack.com/MrRio/jsPDF/master/examples/html2pdf/showcase_supported_html.html

Example code:

&lt;div id=&quot;html&quot;&gt;My HTML&lt;/div&gt;
&lt;script src=&quot;https://html2canvas.hertzen.com/dist/html2canvas.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
	var pdf = new jsPDF(&#39;p&#39;, &#39;pt&#39;, &#39;a4&#39;);
	pdf.html(document.getElementById(&#39;html&#39;), {
		callback: function (pdf) {
			pdf.save(&#39;a4.pdf&#39;);
		}
	});
&lt;/script&gt;

答案2

得分: 0

如下示例中,您可以使用Vue.js中的HTML下载PDF。

<div ref="content">
  <h1>你好世界</h1>
</div>

downloadPDF() {
  const doc = new jsPDF('p', 'pt', 'a4');
  doc.html(this.$refs.content.innerHTML, {
    callback: function (doc) {
      doc.save('op.pdf');
    },
    x: 10,
    y: 10,
  });
}

希望这可以帮助您下载包含HTML内容的PDF。

英文:

as below example you can downwload the pdf with html in vue.js

&lt;div ref=&quot;content&quot;&gt;
  &lt;h1&gt; hello wolrd ! &lt;/h1&gt;
&lt;/div&gt;

downloadPDF() {
const doc = new jsPDF(&#39;p&#39;, &#39;pt&#39;, &#39;a4&#39;);
          doc.html(this.$refs.content.innerHTML, {
          callback: function (doc) {
            doc.save(&#39;op.pdf&#39;);
          },
          x: 10,
          y: 10,
          
        });}

huangapple
  • 本文由 发表于 2020年1月6日 02:33:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/59602994.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定