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.rhkb.cn/news/380019.html

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

相关文章

顶着关税也要出海，蔚来如何找到未来？

顶着关税也要出海，蔚来如何找到未来？

“买得杏花&#xff0c;十载归来方始坼。” 十年的时间&#xff0c;足以见证每一个市场与品牌的白云苍狗、沧海桑田。 而2024年&#xff0c;也是蔚来成立的第十年。这十年里&#xff0c;中国的新能源车的渗透率从0.32%提高到了31.6%&#xff0c;蔚来从一家初创车企成长为如今…
阅读更多...
设计模式——模版方法和策略模式

设计模式——模版方法和策略模式

前言 作为一名资深CV工程师&#xff0c;学会为自己减少工作量乃重中之重。但只是一味地CV&#xff0c;只会因为劣质代码而让自己的工作量加倍&#xff0c;为了将来不被繁重的维护工作而打扰自己的休息日&#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 格式写入日志文件。我们的…
阅读更多...
COD论文笔记 Deep Gradient Learning for Efficient Camouflaged 2022

COD论文笔记 Deep Gradient Learning for Efficient Camouflaged 2022

动机 这篇论文的动机在于解决伪装目标检测(COD)中的一个关键问题&#xff1a;在复杂背景下&#xff0c;伪装目标与背景的边界模糊&#xff0c;使得检测变得极其困难。现有的方法&#xff0c;如基于边界或不确定性的模型&#xff0c;通常仅响应于伪装目标的稀疏边缘&#xff0c…
阅读更多...
[米联客-安路飞龙DR1-FPSOC] FPGA基础篇连载-21 VTC视频时序控制器设计

[米联客-安路飞龙DR1-FPSOC] FPGA基础篇连载-21 VTC视频时序控制器设计

软件版本&#xff1a;Anlogic -TD5.9.1-DR1_ES1.1 操作系统&#xff1a;WIN10 64bit 硬件平台&#xff1a;适用安路(Anlogic)FPGA 实验平台&#xff1a;米联客-MLK-L1-CZ06-DR1M90G开发板 板卡获取平台&#xff1a;https://milianke.tmall.com/ 登录“米联客”FPGA社区 ht…
阅读更多...
ACM中国图灵大会专题 | 图灵奖得主Manuel Blum教授与仓颉团队交流 | 华为论坛：面向全场景应用编程语言精彩回顾

ACM中国图灵大会专题 | 图灵奖得主Manuel Blum教授与仓颉团队交流 | 华为论坛：面向全场景应用编程语言精彩回顾

ACM 中国图灵大会&#xff08;ACM Turing Award Celebration Conference TURC 2024&#xff09;于2024年7月5日至7日在长沙举行。本届大会由ACM主办&#xff0c;in cooperation with CCF&#xff0c;互联网之父Vinton Cerf、中国计算机学会前理事长梅宏院士和廖湘科院士担任学术…
阅读更多...
【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【26】【内网穿透】cpolar

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【26】【内网穿透】cpolar

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【27】【内网穿透】cpolar 内网穿透cpolar内网穿透联调配置练习—使用公网地址访问gulimall.com参考 内网穿透 正常的外网需要访问我们项目的流程是&#xff1a; 买服务器并且有公网固定…
阅读更多...
系统架构设计师教程 第3章 信息系统基础知识-3.7 企业资源规划（ERP）-解读

系统架构设计师教程 第3章 信息系统基础知识-3.7 企业资源规划（ERP）-解读

系统架构设计师教程 第3章 信息系统基础知识-3.7 企业资源规划&#xff08;ERP&#xff09; 3.7.1　企业资源规划的概念3.7.2　企业资源规划的结构3.7.2.1 生产预测3.7.2.2 销售管理&#xff08;计划&#xff09;3.7.2.3 经营计划&#xff08;生产计划大纲&#xff09;3.7.2.4 …
阅读更多...
小白新手搭建个人网盘

小白新手搭建个人网盘

小白新手搭建个人网盘 序云服务器ECS重置密码远程连接ECS实例 安装OwnCloud安装Apache服务PHP运行环境NAS挂载挂载验证操作体验 序 阿里云文件存储NAS&#xff08;Apsara File Storage NAS&#xff09;是一个可大规模共享访问&#xff0c;弹性扩展的分布式文件系统。本文主要是…
阅读更多...
好玩的调度技术-场景编辑器

好玩的调度技术-场景编辑器

好玩的调度技术-场景编辑器 文章目录 好玩的调度技术-场景编辑器前言一、演示一、代码总结好玩系列 前言 这两天写前端写上瘾了&#xff0c;顺手做了个好玩的东西&#xff0c;好玩系列也好久没更新&#xff0c;正好作为素材写一篇文章&#xff0c;我真的觉得蛮好玩的&#xff…
阅读更多...
免费视频批量横转竖

免费视频批量横转竖

简介 视频处理器 v1.3 是一款由是貔貅呀开发的视频编辑和处理工具&#xff0c;提供高效便捷的视频批量横转竖&#xff0c;主要功能&#xff1a; 导入与删除文件&#xff1a;轻松导入多个视频文件&#xff0c;删除不必要的文件。暂停与继续处理&#xff1a;随时暂停和继续处理。…
阅读更多...
【JavaEE进阶】——Spring AOP

【JavaEE进阶】——Spring AOP

目录 &#x1f6a9;Spring AOP概述 &#x1f6a9;Spring AOP快速⼊⻔ &#x1f393;引入AOP依赖 &#x1f393;编写AOP程序 &#x1f6a9;Spring AOP 详解 &#x1f393;Spring AOP核⼼概念 &#x1f393;通知类型 &#x1f393;PointCut &#x1f393;切⾯优先级 Ord…
阅读更多...
泰迪科技2024年高校（本科/职业院校）大数据实验室建设及大数据实训平台整体解决方案

泰迪科技2024年高校（本科/职业院校）大数据实验室建设及大数据实训平台整体解决方案

高校大数据应用人才培养目标 大数据专业是面向信息技术行业&#xff0c;培养德智体美劳全面发展的大数据领域的高素质管理型专门人才&#xff0c;毕业生具备扎实的管理学、经济学、自然科学、技术应用、人文社科的基本理论, 系统深入的大数据管理专业知识和实践能力&#xff0c…
阅读更多...
如何学习Spark：糙快猛的大数据之旅

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

作为一名大数据开发者,我深知学习Spark的重要性。今天,我想和大家分享一下我的Spark学习心得,希望能够帮助到正在学习或准备学习Spark的朋友们。 目录 Spark是什么?学习Spark的"糙快猛"之道1. 不要追求完美,在实践中学习2. 利用大模型作为24小时助教3. 根据自己的节…
阅读更多...
宠物空气净化器哪款品牌好？口碑好的猫用空气净化器排名

宠物空气净化器哪款品牌好？口碑好的猫用空气净化器排名

猫咪每年掉毛两次&#xff0c;一次掉半年的现象真让人头疼。作为一位5年资深铲屎官&#xff0c;特别是在掉毛季节&#xff0c;猫毛无处不在&#xff0c;对此深有体会。宠物空气净化器已成为铲屎官们的救星&#xff0c;能迅速清理家中的宠物毛发和异味&#xff0c;是养猫家庭的必…
阅读更多...
四个节点即可实现的ComfyUI批量抠图工作流

四个节点即可实现的ComfyUI批量抠图工作流

原文链接&#xff1a;ComfyUI面部修复完全指南 (chinaz.com) 下图就是批量抠图的工作流 虽然工作流很简单&#xff0c;但是我们前提还是需要安装好我们的节点 首先安装我们的抠图节点 安装 BiRefNet 所需依赖&#xff1a;timm&#xff0c;如已安装无需运行 requirements.txt…
阅读更多...
【最新发布】生成式人工智能全球研究报告

【最新发布】生成式人工智能全球研究报告

7月10日&#xff0c;美国著名的大数据分析平台和全球最大的数据分析公司之一SAS在其官网发布了一份关于生成式人工智能&#xff08;AIGC&#xff09;深度应用的调查报告。 本次的报告主要对以美国、中国、英国、法国、巴西、日本等为主的北美、拉美、欧洲、亚太地区主要国家的1…
阅读更多...
云计算实训09——rsync远程同步、自动化推取文件、对rsyncd服务进行加密操作、远程监控脚本

云计算实训09——rsync远程同步、自动化推取文件、对rsyncd服务进行加密操作、远程监控脚本

一、rsync远程同步 1.rsync基本概述 &#xff08;1&#xff09;sync同步 &#xff08;2&#xff09;async异步 &#xff08;3&#xff09;rsync远程同步 2.rsync的特点 可以镜像保存整个目录树和文件系统 可以保留原有权限&#xff0c;owner,group,时间&#xff0c;软硬链…
阅读更多...
vue3 + antd vue 纯前端 基于xlsx 实现导入excel 转 json，将json数据转换XLSX并下载（下载模版）

vue3 + antd vue 纯前端 基于xlsx 实现导入excel 转 json，将json数据转换XLSX并下载（下载模版）

一、导入 0、关键代码 // 安装插件 npm i xlsx/yarn add xlsx // 导入xlsx import * as XLSX from xlsx; 点击提交的时候才整理数据。上传的时候文件保存在 state.form.file[0] 中的 // 定义字段映射关系 const fieldMap {sheet2json: {技能名称: skill_name,技能等级: …
阅读更多...
AI 绘画｜Midjourney设计Logo提示词

AI 绘画｜Midjourney设计Logo提示词

你是否已经看过许多别人分享的 MJ 咒语&#xff0c;却仍无法按照自己的想法画图&#xff1f;通过学习 MJ 的提示词逻辑后&#xff0c;你将能够更好地理解并创作自己的“咒语”。本文将详细拆解使用 MJ 设计 Logo 的逻辑&#xff0c;让你在阅读后即可轻松上手&#xff0c;制作出…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023