PhantomJs将html生成img|pdf

news2024/12/24 21:00:55

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1936405.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

QT反射内存读写操作

QT反射内存读写操作

反射内存技术适用于通过以太网、光纤通道或其他串行网络连接计算机或可编程逻辑控制器的应用&#xff0c;尤其在实时交互和高通信要求的系统中表现突出。虽然价格较高&#xff0c;但其易用性和性能优势带来了显著回报。反射内存能够在微秒级内将计算机的内存副本分发到整个网络…
阅读更多...
Element UI DatePicker选择日期范围区间默认显示前一个月和本月

Element UI DatePicker选择日期范围区间默认显示前一个月和本月

要求&#xff1a;点击el-date-picker选择时间范围时&#xff0c;默认展开当月和上个月。 但是Element UI的组件默认展开的是本月和下一个月&#xff0c;如下图所示&#xff1a; 改为 <span click"changeInitCalendarRange"><el-date-picker v-model"r…
阅读更多...
QT获取电脑网卡IP等信息

QT获取电脑网卡IP等信息

文章目录 一、背景信息二、代码实现 一、背景信息 电脑有一个或者多个网卡&#xff0c;如下图所示&#xff1a; 一个网卡又可以配有多个IP地址&#xff0c;包括 IPv4 和 IPv6 地址&#xff1a; 二、代码实现 以下代码实现了查找电脑所有网卡&#xff0c;并获取某个网卡的 IP …
阅读更多...
苹果电脑crossover怎么下载 苹果电脑下载crossover对电脑有影响吗 MacBook下载crossover软件

苹果电脑crossover怎么下载 苹果电脑下载crossover对电脑有影响吗 MacBook下载crossover软件

CodeWeavers 发布了 CrossOver 24 版本更新&#xff0c;不仅兼容更多应用和游戏&#xff0c;得益于 Wine 9.0 带来的 7000 多项改进&#xff0c;CrossOver 还可以在 64 位系统上运行Windows应用的软件&#xff0c;使得用户可以在Mac系统中轻松安装使用仅支持Windows系统运营环境…
阅读更多...
ubuntu源码安装Odoo

ubuntu源码安装Odoo

序言:时间是我们最宝贵的财富,珍惜手上的每个时分 Odoo具有非常多的安装方式&#xff0c;除了我最爱用的 apt-get install&#xff0c;我们还可以使用git拉取Odoo源码进行安装。 本次示例于ubuntu20.04 Desktop上进行操作&#xff0c;理论上在ubuntu14.04之后都可以用此操作。 …
阅读更多...
uniapp 小程序 嵌套 webview 返回需要点击两次

uniapp 小程序 嵌套 webview 返回需要点击两次

uniapp 小程序 嵌套 webview 返回需要点击两次 先 上图 小程序也监听不到 返回事件在网上找了一圈 都没有理想的答案&#xff0c;猜测 是因为嵌入的页面中有问题果然 小程序中嵌入的代码 <view><web-view :src"urlSrc" ></web-view></view>…
阅读更多...
【思科】链路聚合实验配置和背景

【思科】链路聚合实验配置和背景

【思科】链路聚合实验配置和背景 背景链路聚合基本概念链路聚合聚合接口 思科链路聚合协议01.PAgP协议02.LACP协议 思科链路聚合模式LACP协议模式PAgP协议模式ON模式 实验准备配置二层链路聚合LACP协议模式SW1SW2PC1PC2查看LACP聚合组建立情况查看LACP聚合端口情况查看逻辑聚合…
阅读更多...
使用github actions构建多平台electron应用

使用github actions构建多平台electron应用

1. 创建electron项目 使用pnpm创建项目 pnpm create quick-start/electron 2. 修改electron-builder.yml文件 修改mac的target mac:target:- target: dmgarch: universal 3. 添加workflow 创建 .github/workflows/main.yml 文件 name: Build/release Electron appon:work…
阅读更多...
excel系列(三) - 利用 easyexcel 快速实现 excel 文件导入导出

excel系列(三) - 利用 easyexcel 快速实现 excel 文件导入导出

一、介绍 在上篇文章中&#xff0c;我们介绍了 easypoi 工具实现 excel 文件的导入导出。 本篇我们继续深入介绍另一款更优秀的 excel 工具库&#xff1a;easyexcel 。 二、easyexcel easyexcel 是阿里巴巴开源的一款 excel 解析工具&#xff0c;底层逻辑也是基于 apache p…
阅读更多...
独立站外链如何影响搜索引擎排名？

独立站外链如何影响搜索引擎排名？

独立站的外链对搜索引擎排名有着非常重要的影响。简单来说&#xff0c;外链就像是别的网站对你的网站投的信任票。每一条外链都告诉搜索引擎&#xff1a;“这个网站的内容是有价值的&#xff0c;值得推荐。”因此&#xff0c;外链的数量和质量直接影响你的网站在搜索引擎中的排…
阅读更多...
对称加密与非对称加密

对称加密与非对称加密

对称加密 对称加密指的是加密和解密使用同一个秘钥，所以叫对称加密。对称加密只有一个秘钥，称为私钥。 优点：算法公开、计算量小、加密速度快、效率高 缺点：数据传输前，发送方和接收方必须确定好秘钥，双方也必须要保存好秘钥。 常见对称加密算法： DES、3DES、AES、3…
阅读更多...
Linux云计算 |【第一阶段】ENGINEER-DAY3

Linux云计算 |【第一阶段】ENGINEER-DAY3

主要内容&#xff1a; LVM逻辑卷管理、VDO、RAID磁盘阵列、进程管理 一、新建逻辑卷 1、什么是逻辑卷 逻辑卷&#xff08;Logical Volume&#xff09;是逻辑卷管理&#xff08;Logical Volume Management&#xff0c;LVM&#xff09;系统中的一个概念。LVM是一种用于磁盘管理…
阅读更多...
前端组件化探索与实践：Vue自定义暂无数据组件的开发与应用

前端组件化探索与实践：Vue自定义暂无数据组件的开发与应用

摘要 随着前端开发技术的不断进步&#xff0c;组件化开发已成为提升开发效率、降低维护成本的关键手段。本文旨在通过介绍一款Vue自定义暂无数据组件的开发与实践&#xff0c;深入探讨前端组件化开发的重要性、优势及其在实际项目中的应用。 一、引言 在前端开发中&#xff0…
阅读更多...
【数据结构】堆的实现以及建堆算法和堆排序

【数据结构】堆的实现以及建堆算法和堆排序

【数据结构】堆的实现以及建堆算法和堆排序 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;数据结构 文章目录 【数据结构】堆的实现以及建堆算法和堆排序前言一.堆的实现1.1 堆数据的插入1.2堆数据的删除 二.建堆算法和堆排序2.1思路分析2.…
阅读更多...
Linux网络编程之UDP

Linux网络编程之UDP

文章目录 Linux网络编程之UDP1、端口号2、端口号和进程ID的区别3、重新认识网络通讯过程4、UDP协议的简单认识5、网络字节序6、socket编程接口6.1、socket常见接口6.2、sockaddr通用地址结构 7、简单的UDP网络程序7.1、服务器响应程序7.2、服务器执行命令行7.3、服务器英语单词…
阅读更多...
R语言画散点图-饼图-折线图-柱状图-箱线图-直方图-曲线图-热力图-雷达图

R语言画散点图-饼图-折线图-柱状图-箱线图-直方图-曲线图-热力图-雷达图

R语言画散点图-饼图-折线图-柱状图-箱线图-直方图-曲线图-热力图-雷达图 散点图示例解析效果 饼图示例解析效果 折线图示例解析效果 柱状图示例解析效果 箱线图示例解析效果 直方图示例解析效果 曲线图使用 curve() 函数示例效果 使用 plot() 函数示例效果 使用 ggplot2 包绘制…
阅读更多...
iMazing 3 换手机后苹果游戏数据还有吗 换iPhone怎么转移游戏数据

iMazing 3 换手机后苹果游戏数据还有吗 换iPhone怎么转移游戏数据

当你想要更换手机&#xff0c;无论是选择升级到最新款iPhone&#xff0c;或者换到“经典”旧款iPhone&#xff0c;单机游戏数据的转移总是让人发愁。本文将详细介绍换手机后苹果游戏数据还有吗&#xff0c;以及换iPhone怎么转移游戏数据&#xff0c;确保你能无缝继续你的游戏体…
阅读更多...
jenkins+gitlab+harbor+maven自动化容器部署

jenkins+gitlab+harbor+maven自动化容器部署

一、gitlab安装配置 1.1、安装 由于比较懒啊&#xff01;这里就直接使用docker安装了啊&#xff01; 没事先更新一个yum源&#xff1a;yum update -y 整一个gitlab镜像&#xff1a;docker pull gitlab/gitlab-ce 运行一个gitlab容器&#xff1a;docker run -d -p 8443:443 -p…
阅读更多...
安装 Maven

安装 Maven

安装 Maven 的步骤&#xff1a; 1. 访问 Maven 官方网站: https://maven.apache.org/download.cgi 2. 下载 Maven 的二进制文件 3. 解压下载的文件到希望安装的目录 4. 将 Maven 的 bin 目录添加到您的系统环境变量 PATH 中&#xff08;配置环境变量&#xff09; 这个步骤可…
阅读更多...
Ubuntu24.04 NFS 服务配置

Ubuntu24.04 NFS 服务配置

1、NFS 介绍 NFS 是 Network FileSystem 的缩写&#xff0c;顾名思义就是网络文件存储系统&#xff0c;它允许网络中的计算机之间通过 TCP/IP 网络共享资源。通过 NFS&#xff0c;我们本地 NFS 的客户端应用可以透明地读写位于服务端 NFS 服务器上的文件&#xff0c;就像访问本…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023