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()
目录
相关文章
|
7天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
7天前
|
前端开发 测试技术 UED
【专栏:HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
【4月更文挑战第30天】本文介绍了使用HTML和CSS创建吸引人的在线产品展示页面的实战步骤,包括页面设计规划、HTML结构搭建、CSS样式设计、具体页面实现、交互效果添加、优化与提升。通过简洁布局、产品列表和详情页设计,实现易用且具吸引力的展示效果。优化图片和代码,提升性能,以助企业在数字时代脱颖而出。
|
9天前
|
弹性计算 运维 Shell
|
10天前
|
JSON 监控 JavaScript
【LLM】基于LLama构建智能助理实现与PDF文件智能对话
【4月更文挑战第12天】构建智能助理服务,实现与PDF的自由对话
|
10天前
|
缓存 JavaScript 前端开发
html文件压缩
【4月更文挑战第28天】html文件压缩
29 5
|
13天前
|
JSON JavaScript 数据格式
python遍历目录文件_结合vue获取所有的html文件并且展示
python遍历目录文件_结合vue获取所有的html文件并且展示
6 0
|
15天前
【代码片段】【HTML】弹出对话框点选加载文件
【代码片段】【HTML】弹出对话框点选加载文件
16 1
|
16天前
|
Python
python html(文件/url/html字符串)转pdf
python html(文件/url/html字符串)转pdf
9 0
|
19天前
|
机器人
机器人飞船404页面模板HTML源码
机器人飞船404页面模板HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
26 5
机器人飞船404页面模板HTML源码
|
20天前
页面渲染效果图(樱花飘落).html(网上收集 4)
页面渲染效果图(樱花飘落).html(网上收集 4)
页面渲染效果图(樱花飘落).html(网上收集 4)