使用图片将HTML转换为PDF [英] Convert Html to pdf with images

查看:134
本文介绍了使用图片将HTML转换为PDF的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图将HTML转换为PDF,所以我使用了TCPDF的PHP插件. 那是它的官方网站 TCPDF

I'm trying to convert HTML to PDF so i used TCPDF its PHP plugin. that is the official site for it TCPDF

它运行良好,但工具如此有限,并且字体也有限

it was working well but its so limited tool and it has limited fonts

并且它不能将图像转换为PDF,所以我如何将带有图像的完整HTML页面转换为PDF文件,无论是JS还是PHP插件都没有关系,我只想采用主动解决方案将带有CSS的整个HTML页面转换为PDF文件,也许我会保存或打印

And it cant convert images to PDF so how can i convert full HTML page with images to PDF file, it dose not matter if it JS or PHP plugin , i just want active solution to convert the whole HTML page with Css to PDF file and maybe i will save it or print it

推荐答案

    $('#showPdf').click(function() {
      var pdf = new jsPDF();  
      pdf.addHTML($("#divContent"), function() {
    	var blob = pdf.output("blob");
        window.open(URL.createObjectURL(blob));
      });
    });
$('#downloadPdf').click(function() {
  var pdf = new jsPDF();  
  pdf.addHTML($("#divContent"), function() {
	pdf.save('pageContent.pdf');
  });
});
   

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <div id="divContent" style="background-color: white; padding:20px 25px">
      <h3>SEA MINK</h3>
      <p>The sea mink (Neovison macrodon) was a mammal from the eastern coast
      of North America, in the family of weasels and otters in the order Carnivora.
      The largest of the minks, it was hunted to extinction by fur traders before 1903,
      when it was first given a species description. Some biologists classify it as a subspecies of the
      American mink. Estimates of its size are speculative, based largely on skull fragments recovered 
      from Native American shell middens, and on tooth remains. Some information on its appearance and 
      habits was provided by fur traders and Native Americans. It may have been similar in behavior to
      the American mink: it probably maintained home ranges, was polygynandrous, and had a similar diet, 
      supplemented by saltwater prey. Sea minks were commonly trapped along the coast of the Bay of
      Fundy in the Gulf of Maine. Remains have been found along the New England coast, and there were r
      egular reports of unusually large mink furs, probably sea mink, being collected from Nova Scotia</p>
      
      <img  src="data:image/jpeg;base64,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"/>
      </div>
      <button id="showPdf">Generate PDF</button>
<button id="downloadPdf">Download PDF</button>

在浏览器中尝试此代码可获得更好的结果.

Try this code in your browser for better result.

这篇关于使用图片将HTML转换为PDF的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆