JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】

本文实例讲述了JS实现的将html转为pdf功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
<head>
 <title>jsPDF插件</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script src="https://code.jquery.com/jquery-git.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
</head>
<body>
 <p class="pdf-wrapper" ="to-pdf">HTML content...<h1>中文</h1>
  中国,汉字,测试:合同 模版 中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国</br>中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国....................<br/>
  中国,汉字,测试:合同 模版 ...................<br/>
   计费 接口 ....................<br/>
  <img src='//www.jb51.net/images/logo.gif'/>
 </p>
 <script type="text/javascript">
  var pdf = new jsPDF('p','pt','a4');
  pdf.internal.scaleFactor = 1;
  var options = {
    pagesplit: true
  };
  //$('.pdf-wrapper')
  pdf.addHTML(document.body,options,function() {
   pdf.save('web1111.pdf');
  });
 </script>
</body>
</html>

运行效果：

更多关于JavaScript相关内容可查看本站专题：《JavaScript扩展技巧总结》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript代码生成PDF文件的方法

    如何使用js生成pdf文件呢?相信很多朋友都被这一问题迷惑着,下面由我们小编通过本文给大家简单介绍下. 可以使用javascript生成PDF的类库–jsPDF,先下载jsPDF-0.9.0rc2下载地址:;请点这里 ,以下是完整实例代码: <!doctype> <html> <head> <title>jsPDF</title> <meta http-equiv="Content-Type" content="

  • jsPDF导出pdf示例

    jsPDF貌似不支持中文 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en&q

  • JavaScript+Java实现HTML页面转为PDF文件保存的方法

    需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的. 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE. 前端: 首先引入  html2canvas.js html2canvas(document.body, { //截图对象 //此处可配置详细参数 onrendered: function(canvas) { //渲染完成回调canvas canvas.id = "mycanvas"; // 生成base64图片数据 var

  • 使用jspdf生成pdf报表

    由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化. 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js html2canvas.js jspdf.plugin.autotable.js 前台动态生成的chart现在一般是用的html5的canvas或者是svg,很不幸运,我遇到的是svg, 如果是flash没研究过. 由于报表还需要保持原html页面的外观,但

  • 纯js实现html转pdf的简单实例(推荐)

    项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass. 2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试

  • 用Javascript检查Adobe PDF插件是否安装的实现代码

    无标题文档 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 上面代码在IE6.0和firefox 3.0下运行通过.

  • js插件方式打开pdf文件(浏览器pdf插件分享)

    js插件方式打开pdf文件(浏览器pdf插件分享)

    两种方案:一种直接链接,把pdf文件当作img文件,类似<a href=""/>这种形式,这样链接: 复制代码 代码如下: <frame src="pdf文件的地址"></frame> 另一种:使用js插件哈.其中实现阅读pdf文件的js插件很多,比如:pdf.js:是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持:jsPDF:是一个使用Javascript语言生成PDF的开源库(IE暂不支持)

  • 基于Phantomjs生成PDF的实现方法

    本文实例讲述了基于Phantomjs生成PDF的实现方法.分享给大家供大家参考,具体如下: 最近在node.js项目开发中,遇见生成PDF的需求,当然生成PDF不是一个新意的需求:我可以选择利用开源的pdfkit或者其他node pdf模块,或者通过edge.js调用.net/python下的pdf库去做生成pdf.但是在我看来对于这些东西不管如何也需要花费我们太多的时间(pdf报表的内容报表很复杂),不如把所有的画图实现逻辑推向大家所熟悉的html+css来的简洁,快速,这样对于pdf格式变化

  • phonegap教程使用jspdf库在应用中生成pdf文件(pdf生成方法)

    首先在命令行创建一个PhoneGap工程 复制代码 代码如下: phonegap create . "jspdf.sample" "JSPDF App"phonegap local plugin add org.apache.cordova.filephonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git 然后,下载JSPDF代码 down

  • JS导出PDF插件的方法(支持中文、图片使用路径)

    在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题.它的效果可以先到http://pdfmake.org/playground.html查看.在使用过程中,还发现图片的插入是相对繁琐的一件事. 针对这些问题,本文的主要内容可分为三部分: •pdfmake的基本使用方法: •如何解决中文问题; •如何通过指定图片地址插入图片. pdfmake的基本使用方法 1.包含以下两个文件 <script src="build/

  • jsPDF生成pdf后在网页展示实例

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>jsPDF</title> <script type="text/javascript" src="jspdf.js"></script> <s

随机推荐