PhantomJs将html生成img|pdf

置顶 已于 2024-07-16 20:59:14 修改
阅读量459 收藏 11
点赞数 11
文章标签： html pdf js java
于 2024-07-16 20:50:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014614478/article/details/140475526
版权

PhantomJS

       PhantomJS是一个可编程的无头浏览器，‌它基于WebKit内核，‌通过JavaScript API进行脚本化操作，它对各种web标准有快速和原生化的支持，包括DOM处理、CSS选择器、JSON、Canvas和SVG。‌无头浏览器指的是一个完整的浏览器内核，‌包括JavaScript解析引擎、‌渲染引擎、‌请求处理等，‌但不包括显示和用户交互页面的浏览器。‌PhantomJS的使用场景包括网页自动化测试、‌网络爬虫、‌生成网页截图等，‌它提供了一个隐藏的浏览器环境，‌允许开发者通过编程方式控制浏览器的行为，‌如加载网页、‌处理JavaScript、‌捕获网页截图。

1.Phantomjs 下载

下载链接: 下载 | PhantomJS

Window:

phantomjs-2.1.1-windows.zip

Linux：

phantomjs-2.1.1-linux-x86_64.tar.bz2

其他系统版本下载链接中查看支持版本

2.webpage关键字及用法

webpage 常用属性，方法及回调事件

2.1webpage属性

  • page.canGoForward -> boolean

判断 window.history.forward 是否是可以向前。

  • page.canGoBack -> boolean

判断 window.history.back 是否是可以回退。

  • page.clipRect -> object

可以被设置成以下形式的对象,指定了屏幕需要被截图的部分

{ top: 0, left: 0, width: 1024, height: 768 }

  • page.content -> string

当前页面的整个html内容

  • page.cookies -> object

网页Cookies 信息 map数据结构

  • page.event -> object

包含modifiers 和 key属性 map数据结构

  • page.libraryPath -> String

当前的库路径，通常是指当前执行的脚本所在的目录

  • page.loading -> boolean

判断页面是否正在加载

  • page.loadingProgress -> number

页面加载进度。 值为100 意味着页面加载完成

  • page.offlineStoragePath -> String

sqlite3 localstorage和其他离线数据存储的位置

  • page.offlineStorageQuota-> number

可以离线存储的字节数

  • page.paperSize -> object

类似于clipRect，但采用A4纸张大小的尺寸

  • page.plainText -> string

请求页面中的纯文本

  • page.scrollPosition -> object

页面当前滚到到的位置

  • page.navigationLocked -> boolean

是否允许页面弹跳

  • page.settings -> object

页面设置

  • page.title -> string

页面title

  • page.url -> string

页面当前url

  • page.viewportSize -> string

浏览器窗口大小

  • page.windowName -> string

由WM定义的浏览器窗口的名称

  • page.zoomFactor -> number

缩放因子。1 表示正常焦距

2.2webpage方法

  • page.childFramesCount  获取页面的子框架数量
  • page.childFrames  获取页面的子框架
  • page.close 关闭当前页面
  • page.currentFrameName 当前页面框架名称
  • page.deleteLater
  • page.destroyed 页面是否销毁
  • page.evaluate 获取页面上下文事件,获取实例化页面的数据及方法
  • page.initialized 页面初始化，在page创建之后触发
  • page.injectJs 引入外部js到当前页面
  • page.javaScriptAlertSent 处理一个JavaScript 警告框
  • page.javaScriptConsoleMessageSent JavaScript 代码向控制台发送了消息
  • page.loadFinished 页面是否加载完成
  • page.loadStarted 页面开始加载
  • page.openUrl 打开网站页面
  • page.open 打开网站页面
  • page.release
  • page.render 当前页面渲染成（PNG，JPEG，GIF，PDF）
  • page.resourceError 资源加载失败时，触发此事件
  • page.uploadFile 模拟页面中常常会有上传文件的操作
  • page.sendEvent 模拟鼠标，键盘交互事件
  • page.setContent 修改page.content和page.url内容，会触发reload
  • page.addCookie 增加cookie
  • page.deleteCookie 删除cookie
  • page.clearCookies 清空cookie

2.3webpage事件

  • onInitialized  在page创建后触发
  • onLoadStarted 在page 加载时触发
  • onLoadFinished 在page加载完成触发
  • onUrlChanged 在page url改变后触发，在onInitialized  之后
  • onNavigationRequested 在 page.navigationLocked 中允许页面跳转，才用此接口function(url, type, willNavigate, main)
  • onRepaintRequested 在页面重绘时使用
  • onResourceRequested 在页面请求资源时触发(js,css,img)
  • onResourceReceived 在页面请求资源接收时触发
  • onResourceError 在页面请求资源异常时触发
  • onResourceTimeout 在页面请求资源超时时触发
  • onAlert 在页面alert时触发
  • onConsoleMessage 在页面打印console时触发
  • onClosing 在页面关闭时触发
  • onConfirm 在页面确认时触发

3.使用案例

执行命令(Window): 每位参数以“空格”分割

xxx/xxx/phantomjs-2.1.1-windows/bin/phantomjs.exe xxx/xxx/xxx.js param1 param2 param3 ...

执行命令(Linux): 每位参数以“空格”分割

xxx/xxx/phantomjs-2.1.1-linux-x86_64/bin/phantomjs xxx/xxx/xxx.js param1 param2 param3 ...

3.1params.js

params.js 参数传递及打印

system = require('system');
for(var i=0;i<system.args.length;i++){
    console.log("param"+(i+1)+"="+system.args[i]);
}
phantom.exit();

3.2open.js

open.js打开网页，打印网页源码

var page = require('webpage').create();
page.open('https://www.baidu.com/', function(status) {
    console.log("Status: " + status);
    if(status === "success") {
        console.log(page.content);
    }
    page.close();
    phantom.exit();
});

open_v2.js打开本地静态文件,打印源码

var page = require('webpage').create();
page.open('file:///D:/data/appcenter/templates/pdf/af719062053460841d2fa2726a3bd1a1.html', function(status) {
    console.log("Status: " + status);
    console.log(page.content);
    phantom.exit();
});

3.3other.js

引入外部JS,并调用方法

open.js 引入 other.js

var page = require('webpage').create();
page.open('https://www.baidu.com', function(status) {
    console.log("Status: " + status);
    page.injectJs("other.js");
    if(status === "success") {
        var o = page.evaluate(function(){
            return other();
        });
        console.log(o);
    }
    page.close();
    phantom.exit();
});

other.js

function other(){
    return "我是火星人,入侵地球啦！！！"+document.title;
}

3.4cookie.js

操作cookie数据，增删deleteCookie清clearCookies查page.cookies

var page = require('webpage').create();
page.open('https://www.baidu.com', function(status) {
    console.log("Status: " + status);
    var l = page.cookies.length;
    console.log("原有cookies数量:page.cookies.length="+l);
    var c =
{"domain":"www.baidu.com","httponly":false,"name":"Fills",
"path":"/","secure":false,"value":"Fills-Test"};
page.addCookie(c);
    l = page.cookies.length;
    console.log("打印增加后cookies数量:page.cookies.length="+l);
    for(var i=0;i<l;i++){
        var jsonData = JSON.stringify(page.cookies[i]);
        console.log(jsonData);//遍历cookie 信息
    }
    console.log("delete 最后一个cookie = "+page.cookies[l-1].name);
//删除cookie
    page.deleteCookie(page.cookies[l-1].name);
    l = page.cookies.length;
    console.log("删除后page.cookies.length="+l);
    page.clearCookies();
    l = page.cookies.length;
    console.log("清楚所有cookie后page.cookies.length="+l);
    phantom.exit();
});

3.5html2Imge.js

Html 生成 Image、Pdf

var page = require('webpage').create(),
system = require('system'),
t = Date.now();
address = system.args[1];
output = system.args[2];
width = system.args[3];
console.log("url="+address);
console.log("参数解析完成:"+(Date.now()-t)+"ms");
t = Date.now();
page.open(address, function (status) {
    console.log("status="+status);
    console.log("页面响应完成:"+(Date.now()-t)+"ms");
    t = Date.now();
    if (status !== 'success') {
        console.log('Unable to load the address!'+status);
        phantom.exit(1);
    } else {
        var size = page.evaluate(function() {
            return {height: document.documentElement.scrollHeight,
              width: document.documentElement.scrollWidth};
          });
        if(!width){
            width = size.width;
        }  
        console.log('Page size is ' + width + 'x' + (size.height));
        page.viewportSize = { width: width, height: size.height };
        page.render(output);
        console.log("url="+address+";finish!生成:"+(Date.now()-t)+"ms");
        page.close();
        phantom.exit();
    }
});

3.6echarts2Image.js

生成echart图片

下载 https://www.bootcdn.cn/echarts/

var page = require('webpage').create();
var params = require('system').args;
var width = params[2],height = params[3],outpath = params[4];
var optionStr ="var option= "+params[1];
console.log(optionStr);
console.log(height);console.log(width);
console.log(outpath );
page.open('about:blank', function(status) {
    console.log("Status: " + status);
    page.injectJs('jquery-1.11.2.min.js');
    //下载 https://www.bootcdn.cn/echarts/
    page.injectJs('echarts.min.js');
    page.evaluate(echarts2Image,optionStr,width,height );
    page.viewportSize = { width: width, height:height };
   page.render(outpath);
    console.log("finish");
    page.close();
    phantom.exit();  
});
var echarts2Image =function(optionStr, width, height){
    var script = $('<script>').attr('type', 'text/javascript');
    script.html(optionStr);
    document.getElementsByTagName("head")[0].appendChild(script[0]);
    option.animation = false;
    $(document.body).css('backgroundColor', '#FFFFFF');
    var echarts2Image =  $("<div>").appendTo(document.body);
    echarts2Image.attr('id', 'echarts2Image');
    echarts2Image.css({width : width,height : height});
    var myChart = echarts.init(document.getElementById("echarts2Image"));
    myChart.setOption(option);
};

4.Java调用

Java 执行 命令生成图片

Window idea 执行main

Linux 执行 class

结果图片，pdf忽略

Java源码

TestHtml2Pdf

docx

PhantomJs将html生成图片pdf.docx

5.参考链接

快速接入:http://wenku.kuryun.com/docs/phantomjs/quickstart.html

案例链接: http://wenku.kuryun.com/docs/phantomjs/examples.html

秋叶华
关注
  • 11
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用phantomjs将网页转换成pdf或者长图片
BlowfishKing的博客
07-09 5091
最近有一个将微信公众号的文章转为pdf的想法，主要是为了将很多文章保存下来，方便打印阅读。 最终使用的方法是phantomjs来生成网页的pdf。 PhantomJS 是一个基于WebKit的服务器端 JavaScript API。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。PhantomJS可以...
Java+PhantomJs实现后台生成Echarts图片（完整源码）
维他vi_ta的博客
07-24 9666
目的：实现在java后台直接根据options生成Echarts统计图片 本文实现原理：java调用Runtime.getRuntime().exec()的方式调用phantomjs。然后由phantomjs处理echarts数据,最终生成图片。 第一步：下载并安装PhantomJs 下载地址：http://phantomjs.org/download.html 下载完成后配置环境变量 ​ 把解...
phantomjs+linux+pdf,echarts+phantomjs生成PDF
weixin_34231032的博客
05-12 211
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？需求分析原本的方案是使用前端工具或者浏览器自带的生成 PDF 的功能，但是不同用户的浏览器类型、版本各异，生成的 PDF 效果大相径庭，不是很理想。于是急切需要一个稳定的、一致的 PDF 生成方案。思路分析主要有两种方案：1.前端收集所有 echarts 实例生成的 base64 图片回传到服务器，服务器根据图片数据替换...
java使用phantomjs生成证书图片
pscool的博客
08-10 1936
一：在服务器迁移之后发现，phantomjs截图没有执行，但是服务也没有报错(确认phantomjs相关路径没有问题)到官网下载系统对应的phantomjs：https://phantomjs.org/download.html。参照：https://www.cnblogs.com/ldbangel/p/9761875.html。phantomjs命令的运行，需要借助node环境，因此需要安装nodejs。使用本地的html文件，生成该html文件的图片。1、编写一个测试脚本test.js。......
生成PDF的新选择-Phantomjs
weixin_33961829的博客
01-10 77
最近在node.js项目开发中，遇见生成PDF的需求，当然生成PDF不是一个新意的需求；我可以选择利用开源的pdfkit或者其他node pdf模块，或者通过edge.js调用.net/python下的pdf库去做生成pdf。但是在我看来对于这些东西不管如何也需要花费我们太多的时间(pdf报表的内容报表很复杂)，不如把所有的画图实现逻辑推向大家所熟悉的h...
纯前端 -- html转pdf插件总结
努力的nana
08-11 6335
pdfmake默认不支持中文，所以需要安装字体文件。
无头浏览器与Puppeteer中PDF生成应用指南
AlexGeek
08-25 4102
前言 最近在做项目的时候，遇到了在后端生成PDF的需求，而且生成的页面较多，且样式管理相对复杂，还原度要求较高。通过一系列的社区调研后发现，Puppeteer这个Node库可以提供一个相对高级的API，以DevTools协议控制Chrome或者Chromium，其无头模式可以将HTML转为PDF。这是目前Node Server应用中最为主流的解决方案，但是在使用过程中还是会存在很多坑点和注意事项。因此本文围绕无头浏览器、Puppeteer、HTML转PDF等几个方面进行总结和介绍。 一、无头浏览器 1.
Java & PhantomJs 实现html输出图片
weixin_33755847的博客
12-03 397
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML生成PDF模板(Java iText+FreeMarker生成PDF(HTML转PDF))
jiwangyi的博客
11-12 1368
Java iText+FreeMarker生成PDF(HTML转PDF) 1.背景 在某些业务场景中，需要提供相关的电子凭证，比如网银/支付宝中转账的电子回单，签约的电子合同等。方便用户查看，下载，打印。目前常用的解决方案是，把相关数据信息，生成对应的pdf文件返回给用户。 本文源码：http://git.oschina.net/lujianing/java_pdf_demo 2.iText iText是著名的开放源码的站点sourceforge一个项目，是用于生成PDF文档的一个java类库。通过iTe
phantomJs将html生成图片pdf.docx
最新发布
07-16
phantomJs将html生成image，pdf，爬虫
基于Phantomjs生成PDF的实现方法
10-21
例如，通过提供URL、输出文件名和其他选项，可以执行Phantomjs命令行命令，并将生成的PDF文件内容返回到Node.js响应流中。这使得在Node.js应用中无缝集成PDF生成功能。 5. **优势与适用场景**： 使用Phantomjs生成...
phantomjs导出html到pdf的方法总结
11-26
最近要为我们的文章服务做一个转pdf的功能。经过比较，我觉得phantomjs是转化比较好的。现在讲讲如何使用。 环境 centos x86_64 下载 可以到官网下载: 官网 或者wget也可以: wget -P /tmp/ ...
比较好的HTML转PDF插件Phantomjs
01-08
PhantomJS的一大优点是它可以将网页内容转换为PDF，这在需要保存网页或生成报告时非常有用。与jspdf相比，PhantomJS在处理中文字符和分页效果上表现更好，避免了将页面转换为低分辨率图像的问题。 在描述中提到，...
phantomjs 将某一网页生成pdf 或图片
06-06
对于将网页转换为PDF或图片，PhantomJS能够捕获完整的网页内容，包括CSS样式、图像以及嵌入的资源，确保生成的输出与用户在浏览器中看到的完全一致。 在"phantomjsbaidu.js"这个文件中，可能包含了一个示例脚本，...
使用ant+jmeter如何生成html报告
2301_78276982的博客
07-16 777
下载apache-ant，放到对应路径下，然后进行环境变量配置。系统变量的CLASSPATH添加E:\Installation Pack\eclipse\apache-ant-1.9.6\lib;用户变量的PATH添加：E:\Installation Pack\eclipse\apache-ant-1.9.6\bin。打开cmd，执行 ant，提示"Buildfile:build.xml does not exist!Build failed"则配置成功，ant命令可用。如下图所示。
Html_Css问答集(12)
白话魔法师
07-16 427
html与css学习中的一些疑问，问答中轻松获取知识。
Html_Css问答集(11)
白话魔法师
07-16 566
html与css学习中的一些疑问，问答中轻松获取知识。
CH15-DOM元素属性
IT技术类博客
07-13 1016
DOM 元素
使用PhantomJS 定时截图网页并生成pdf
05-11
PhantomJS 是一个基于 WebKit 的无界面（headless）浏览器，它可以用来自动化测试、网络监测、页面截屏等功能。下面是使用 PhantomJS 定时截图网页并生成 PDF 的步骤： 1. 安装 PhantomJS 下载 PhantomJS 并解压到本地，然后将可执行文件所在的路径添加到系统环境变量中。 2. 编写截图脚本 使用 JavaScript 编写一个截图脚本，例如： ``` var page = require('webpage').create(); page.open('https://www.baidu.com/', function() { page.render('baidu.png'); page.render('baidu.pdf'); phantom.exit(); }); ``` 这个脚本会打开百度首页，截取网页并保存为 PNG 和 PDF 文件。 3. 定时执行脚本 可以使用 crontab 或 Windows 任务计划程序等工具来定时执行这个脚本。例如，在 Linux 系统中，可以使用 crontab -e 命令编辑定时任务： ``` # 每天早上 9 点执行截图脚本 0 9 * * * phantomjs /path/to/screenshot.js ``` 这个定时任务会在每天早上 9 点执行截图脚本，并将截图保存到指定的目录中。 注意，PhantomJS 已经停止了维护，建议使用更先进的 headless 浏览器，如 Chrome 或 Firefox。使用这些浏览器可以使用 Puppeteer 和 Playwright 等工具来实现自动化测试、页面截屏等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值