phantomjs技巧之将html页面转换为pdf文件-阿里云开发者社区

开发者社区> 葛平> 正文

phantomjs技巧之将html页面转换为pdf文件

简介: ## 需求 很多时候我们需要将一些网页转换为pdf,比如开发人员需要为每个客户提供一份运维周报,周报一般是html的页面,但是为了能够永久记录存储,需要将周报转换为pdf格式的文件,pdf一方面便于阅览,另一方面也便于打印出来。所以本文研究如何通过phantomjs将一个html的页面转换为pdf文件。 ## 编写pdfconvert.js代码 ### 1. 先确定pdf输出格式 -
+关注继续查看

需求

很多时候我们需要将一些网页转换为pdf,比如开发人员需要为每个客户提供一份运维周报,周报一般是html的页面,但是为了能够永久记录存储,需要将周报转换为pdf格式的文件,pdf一方面便于阅览,另一方面也便于打印出来。所以本文研究如何通过phantomjs将一个html的页面转换为pdf文件。

编写pdfconvert.js代码

1. 先确定pdf输出格式

  • 页面格式(format):A3/A4/A5/letter
  • 页眉/页脚(header/footer):true or false
  • 页面方向(orientation):portrait/landscape
  • 页边距(margin)
    -浏览器窗口大小(viewportSize)

2. 参数输入输出

  • 输入:url地址
  • 输出:文件名

3. 具体代码(以A4纸输出为例)

var page = require( 'webpage' ).create();
var oss_url, out_pdf;
var system = require('system')
oss_url = system.args[1];  //输入,系统参数
out_pdf = system.args[2]; //输出, 系统参数

page.viewportSize = { width: 1024, height: 800 };  //viewport size

page.paperSize = {
        format: 'A4',
        orientation: 'portrait',
        margin: '1cm',  //页边距
        header: { //如果不需要,可以不用添加
                height: '1cm',
                contents: phantom.callback(function(pageNum, numPages) {
                       //返回页眉的代码逻辑
                       }
                })
        },
        footer: { //如果不需要,可以不用添加
                height: '1cm',
                contents: phantom.callback(function(pageNum, numPages) {
                        //返回页脚的代码逻辑
                        }
                })
        }
};

page.open( oss_url, function( status ) {
                window.setTimeout(function() {
                        if ( status === "success" ) {
                                page.render(out_pdf);
                        }
                        phantom.exit();
                        }, 300); //超时设置
});

后端代码

        url := os.Args[1]
        out_pdf := os.Args[2]
        cmd := exec.Command("./phantomjs", "pdfconvertor.js", url, out_pdf)
        cmd.Stdout = os.Stdout
        cmd.Run()

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
浅谈Android动态页面(二)动态多列表
上一篇讲了些我对动态页面的看法和理解,这篇主要讲讲我做的小demo巩固一下,顺便感受下动态页面的魅力。我会在最后发项目的地址。 一.效果展示 15051384411381505138249369.gif 二.使用方法: 1.在布局中定义 目前第一个版本只定义了两个参数,之后的版本会继续扩展功能。
698 0
.net 中 前台aspx页面调用后台.cs文件中的变量
定义全局变量 在Page_load上面写 public string Url;     后台代码: public partial class WebForm2 : System.Web.
879 0
点击页面判断是否安装app并打开,否则跳转app store的方法
<p style="margin-top:0px; margin-bottom:10px; text-indent:28px; line-height:24px; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,Arial,'Hiragino Sans GB','Microsoft YaHei',微软雅黑; font-
2864 0
【前台】【单页跳转】整个项目实现单页面跳转,抛弃iframe
即如下: 【想做到点击nav侧边栏,仅替换右边div中的内容,而不是跳转到新的页面,这样的话,其实整个项目中就只有一个完整的页面,其他的页面均只写内的部分即可,或者仅仅写要替换的内的部分即可!!】 index.
1173 0
Windows 操作系统页面文件原理
页面文件,是指操作系统反映构建并使用虚拟内存的硬盘空间大小所使用的文件。要整理页面文件,首先将页面文件从原先所在的驱动器移动到其他驱动器,然后对原来驱动器进行整理,最后再将页面文件移回到原驱动器上,此时页面文件就会存放在连续的磁盘空间中了。
1008 0
+关注
葛平
阿里云研发工程师
5
文章
4
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载