js将网页导出成pdf(js 打印指定div内容)2020-09-02

JavaScript016

js将网页导出成pdf(js 打印指定div内容)2020-09-02,第1张

<input type="button"  id="button" value="点击打印"/>

<div id="div_print">

<p>打印此处内容</p>

</div>

<script type="text/javascript">

function printdiv(printpage){

  var newstr=document.getElementById(printpage).innerHTML

  var oldstr=document.body.innerHTML

  document.body.innerHTML=newstr

  window.print()

  document.body.innerHTML=oldstr

  return false

}

window.onload=function(){

  var bt=document.getElementById("button")

  bt.onclick=function(){printdiv('div_print')}

}

</script>

html, body{

 overflow:visible  

}

打印时另存为pdf模式打印后的内容可复制 默认为Microsoft Print to PDF 模式

jspdf隐藏某个元素生成pdf在id上切换来解析该项。就是把html内容转成canvas,然后生成图片,把图片添加到jspdf里,保存导出pdf优点:生成的pdf清晰度良好,且支持中文字体。

把html转成PDF:

1.下载HTML2FPDF开源软件,将其放在你的网站根目录文件夹下,比如 /srv/httpd/htdocs/test/;

2.新建1.php文件,1.php中的代码如下:

<?php

require('html2fpdf.php')

$pdf=new HTML2FPDF()

$pdf->AddPage()

// yourfile.html 你要转化的HTML文件

$yourfile_html = "yourfile.html"

// yourfile.pdf 转化成功后的pdf文件名

$yourfile_pdf = "yourfile.pdf"

$fp = fopen($yourfile_html,"r")

$strContent = fread($fp, filesize($yourfile_html))

fclose($fp)

$pdf->WriteHTML($strContent)

$pdf->Output($yourfile_pdf )

echo "PDF 文件成功生成!"

3.将你要转化的yourfile.html文件也放在test目录下,随后在浏览器中访问1.php文件就可以把html文件转化成PDF文件了,

注意事项:1.php,yourfile.html和html2fpdf.php都要在同一目录下