PhantomJs将html生成img|pdf

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.mzph.cn/news/873569.shtml

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

相关文章

Linux——多路复用之poll

Linux——多路复用之poll

目录 前言 一、poll的认识 二、poll的接口 三、poll的使用 前言 前面我们学习了多路复用的select&#xff0c;知道多路复用的原理与select的使用方法&#xff0c;但是select也有许多缺点&#xff0c;导致他的效率不算高。今天我们来学习poll的使用&#xff0c;看看poll较于…
阅读更多...
Linux先行一步

Linux先行一步

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 ☁️运维工程师的职责&#xff1a;监…
阅读更多...
初识模板【C++】

初识模板【C++】

P. S.&#xff1a;以下代码均在VS2022环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;LiUEEEEE                        …
阅读更多...
AV1技术学习：Intra Prediction

AV1技术学习：Intra Prediction

对于帧内预测模式编码块&#xff0c;亮度分量的预测模式和色度分量的预测模式在比特流中分别发出信号。亮度预测模式是基于相邻左侧和上侧两个编码块预测上下文的概率模型进行熵编码的。色度预测模式的熵编码取决于色度预测模式的状态。帧内预测以变换块为单位&#xff0c;并使…
阅读更多...
Linux下文件I/O操作

Linux下文件I/O操作

读取 time.txt 文件&#xff0c;写入到time_2.txt 一、函数 1.1、open() 函数 #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int open(const char *pathname, int flags); int open(const char *pathname, int flags, mode_t mode);…
阅读更多...
RDMA 高性能架构基本原理与设计方案

RDMA 高性能架构基本原理与设计方案

在进行本文的学习学习之前&#xff0c;我们先对RDMA是什么做一个简单的科普与认识&#xff1a;一文带你了解什么是RDMA-CSDN博客 目录&#xff1a; 目录&#xff1a; 一、RDMA和传统网络方案的比较 1.1 传统网络方案&#xff1a; 1.1.1 缺点一&#xff1a;以太网卡&#xff0…
阅读更多...
debian 更新源

debian 更新源

前言 实现一键替换在线源 一键更新源 Debian 全球镜像站以下支持现有debian 11 12 echo "Delete the default source" rm -rf /etc/apt/sources.listecho "Build a new source" cat <<EOF>>/etc/apt/sources.list.d/debian.sources Types:…
阅读更多...
Tensorflow入门实战 T09进行猫狗识别2

Tensorflow入门实战 T09进行猫狗识别2

目录 1、前言 2、代码 3、运行结果 4、反思 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 1、前言 本周学习内容为&#xff0c;采用自己设置的vgg-16网络进行猫狗识别&#xff0c;使用的模型是YO…
阅读更多...
自动驾驶三维车道线检测系列—LATR: 3D Lane Detection from Monocular Images with Transformer

自动驾驶三维车道线检测系列—LATR: 3D Lane Detection from Monocular Images with Transformer

文章目录 1. 概述2. 背景介绍3. 方法3.1 整体结构3.2 车道感知查询生成器3.3 动态3D地面位置嵌入3.4 预测头和损失 4. 实验评测4.1 数据集和评估指标4.2 实验设置4.3 主要结果 5. 讨论和总结 1. 概述 3D 车道线检测是自动驾驶中的一个基础但具有挑战性的任务。最近的进展主要依…
阅读更多...
vscode搭建PyQt + Quick开发环境

vscode搭建PyQt + Quick开发环境

VScode搭建PyQt Quick开发环境 目录 环境准备 &#x1f514;安装必要的Python包 &#x1f514;&#x1f50e; PyQt5和PySide2的区别&#x1f4be; 安装PyQt5&#x1f4be; 安装PySide2 配置VScode &#x1f514;&#x1f4bb; 安装扩展 代码示例 &#x1f514;✔ Python调用Qt…
阅读更多...
【Django】django自带后台管理系统样式错乱，uwsgi启动css格式消失的问题

【Django】django自带后台管理系统样式错乱，uwsgi启动css格式消失的问题

正常情况&#xff1a; ERROR&#xff1a;&#xff08;css、js文件加载失败&#xff09; 问题&#xff1a;CSS加载的样式没有了&#xff0c;原因&#xff1a;使用了django自带的admin&#xff0c;在使用 python manage.py runserver启动 的时候&#xff0c;可以加载到admin的文…
阅读更多...
如何学习Spark：糙快猛的大数据之旅

如何学习Spark：糙快猛的大数据之旅

作为一名大数据开发者,我深知学习Spark的重要性。今天,我想和大家分享一下我的Spark学习心得,希望能够帮助到正在学习或准备学习Spark的朋友们。 目录 Spark是什么?学习Spark的"糙快猛"之道1. 不要追求完美,在实践中学习2. 利用大模型作为24小时助教3. 根据自己的节…
阅读更多...
无人机的发展前景大吗？

无人机的发展前景大吗？

随着科技的飞速发展&#xff0c;无人机&#xff08;Unmanned Aerial Vehicle, UAV&#xff09;作为一种新兴的航空器&#xff0c;已逐渐从军事领域渗透到民用领域。无人机的应用广泛&#xff0c;包括但不限于航拍、物流配送、环境监测、农业植保、应急救援等多个领域。本文旨在…
阅读更多...
Chromium CI/CD 之Jenkins实用指南2024-在Windows节点上创建任务（九）

Chromium CI/CD 之Jenkins实用指南2024-在Windows节点上创建任务（九）

1. 引言 在现代软件开发流程中&#xff0c;持续集成&#xff08;CI&#xff09;和持续交付&#xff08;CD&#xff09;已成为确保代码质量和加速发布周期的关键实践。Jenkins作为一款广泛应用的开源自动化服务器&#xff0c;通过其强大的插件生态系统和灵活的配置选项&#xf…
阅读更多...
十七、【机器学习】【非监督学习】- K-均值 (K-Means)

十七、【机器学习】【非监督学习】- K-均值 (K-Means)

系列文章目录 第一章 【机器学习】初识机器学习 第二章 【机器学习】【监督学习】- 逻辑回归算法 (Logistic Regression) 第三章 【机器学习】【监督学习】- 支持向量机 (SVM) 第四章【机器学习】【监督学习】- K-近邻算法 (K-NN) 第五章【机器学习】【监督学习】- 决策树…
阅读更多...
静态代理与动态代理的区别与选择

静态代理与动态代理的区别与选择

在当今软件开发领域&#xff0c;代理模式作为一种重要的设计模式&#xff0c;广泛应用于增强现有对象功能、控制访问权限以及实现远程调用等场景。本文旨在深入探讨静态代理与动态代理之间的核心区别&#xff0c;帮助开发者理解两者在实现机制、灵活性、性能表现及适用场景上的…
阅读更多...
Filebeat k8s 部署（Deployment）采集 PVC 日志发送至 Kafka——日志处理（二）

Filebeat k8s 部署（Deployment）采集 PVC 日志发送至 Kafka——日志处理（二）

文章目录 前言Filebeat Configmap 配置Filebeat Deployment验证总结 前言 在上篇文章中总结了 Django 日志控制台输出、文件写入按天拆分文件&#xff0c;自定义 Filter 增加 trace_id 以及过滤——日志处理&#xff08;一)&#xff0c;将日志以 JSON 格式写入日志文件。我们的…
阅读更多...
无人机侦察：二维机扫雷达探测设备技术详解

无人机侦察：二维机扫雷达探测设备技术详解

二维机扫雷达探测设备采用机械扫描方式&#xff0c;通过天线在水平方向和垂直方向上的转动&#xff0c;实现对目标空域的全方位扫描。雷达发射机发射电磁波信号&#xff0c;遇到目标后产生反射&#xff0c;反射信号被雷达接收机接收并处理&#xff0c;进而得到目标的位置、速度…
阅读更多...
spring MVC 简单的案例（2）用户登录

spring MVC 简单的案例（2）用户登录

一、用户登录 1&#xff09;前端代码 index.html <!doctype html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, user-scalableno, initial-scale1.0, maxim…
阅读更多...
git commit报错: pre-commit hook failed (add --no-verify to bypass)

git commit报错: pre-commit hook failed (add --no-verify to bypass)

原因&#xff1a; 在提交前做代码风格检查&#xff0c;若检查不通过&#xff0c;则提交失败 解决方案&#xff1a;进入项目的.git>hooks目录&#xff0c;找到pre-commit文件&#xff0c;删除即可
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023