javascript 获取网页各种宽度

页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线的宽)

网页可见区域高：document.body.offsetHeight (包括边线的宽)

网页正文全文宽：document.body.scrollWidth

网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrollTop

网页被卷去的左：document.body.scrollLeft

网页正文部分上：window.screenTop

网页正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight

屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技术要点

本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>请调整浏览器窗口</title>

</head>

<body>

<h2 align="center">请调整浏览器窗口大小</h2><hr>

浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"><br>

浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"><br>

</form>

<!--

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函数：获取尺寸

{

//获取窗口宽度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通过深入Document内部对body进行检测，获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//结果输出至两个文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//调用函数，获取数值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

html转为pdf的组件有很多，但是还没有哪一款能达到这个效果，其只要原因是wkhtmltopdf使用webkit网页渲染引擎开发的用来将 html转成 pdf的工具，可以跟多种脚本语言进行集成来转换文档。但是就使用简便性来说还是itext等组件占据优势，如果你要转换格式有比较高的要求，那么wkhtmltopdf绝对是不二之选！

下载路径

官网地址 wkhtmltopdf.org/

github地址 github.com/wkhtmltopdf…

使用方法

windows直接使用：只要在windows命令行中输入c:\wkhtmltopdf.exe my.oschina.net/papio/blog/… c:\blog.pdf 就可以把这篇文章转成pdf，并保存到C盘根目录。
java调用：java中调用wkhtmltopdf的命令Runtime.getRuntime().exec("c:\wkhtmltopdf.exe my.oschina.net/papio/blog/… c:\blog.pdf")就可以实现转换。

java调用demo

public class HtmlToPdfInterceptor extends Thread { private InputStream is; public HtmlToPdfInterceptor(InputStream is){ this.is = is; } public void run(){ try{ InputStreamReader isr = new InputStreamReader(is, "utf-8"); BufferedReader br = new BufferedReader(isr); String line = null; while ((line = br.readLine()) != null) { System.out.println(line.toString()); //输出内容 } }catch (IOException e){ e.printStackTrace(); } }}public class HtmlToPdf { //wkhtmltopdf在系统中的路径 private static final String toPdfTool = "D:\wkhtmltopdf\bin\wkhtmltopdf.exe"; /** * html转pdf * @param srcPath html路径，可以是硬盘上的路径，也可以是网络路径 * @param destPath pdf保存路径 * @return 转换成功返回true */ public static boolean convert(String srcPath, String destPath){ File file = new File(destPath); File parent = file.getParentFile(); //如果pdf保存路径不存在，则创建路径 if(!parent.exists()){ parent.mkdirs(); } StringBuilder cmd = new StringBuilder(); cmd.append(toPdfTool); cmd.append(" "); cmd.append(" --header-line");//页眉下面的线 cmd.append(" --header-center 这里是页眉这里是页眉这里是页眉这里是页眉 ");//页眉中间内容 //cmd.append(" --margin-top 30mm ");//设置页面上边距 (default 10mm) cmd.append(" --header-spacing 10 ");//(设置页眉和内容的距离,默认0) cmd.append(srcPath); cmd.append(" "); cmd.append(destPath); boolean result = true; try{ Process proc = Runtime.getRuntime().exec(cmd.toString()); HtmlToPdfInterceptor error = new HtmlToPdfInterceptor(proc.getErrorStream()); HtmlToPdfInterceptor output = new HtmlToPdfInterceptor(proc.getInputStream()); error.start(); output.start(); proc.waitFor(); }catch(Exception e){ result = false; e.printStackTrace(); } return result; } public static void main(String[] args) { HtmlToPdf.convert("https://my.oschina.net/papio/blog/835645", "d:/wkhtmltopdf.pdf"); }}复制代码

wkhtmltopdf 参数详解

wkhtmltopdf [OPTIONS]... <input file> [More input files] <output file>常规选项 --allow <path> 允许加载从指定的文件夹中的文件或文件（可重复） --book* 设置一会打印一本书的时候，通常设置的选项 --collate 打印多份副本时整理 --cookie <name> <value> 设置一个额外的cookie（可重复） --cookie-jar <path> 读取和写入的Cookie，并在提供的cookie jar文件 --copies <number> 复印打印成pdf文件数（默认为1） --cover* <url> 使用HTML文件作为封面。它会带页眉和页脚的TOC之前插入 --custom-header <name> <value> 设置一个附加的HTTP头（可重复） --debug-javascript 显示的javascript调试输出 --default-header* 添加一个缺省的头部，与页面的左边的名称，页面数到右边，例如： --header-left '[webpage]' --header-right '[page]/[toPage]' --header-line --disable-external-links* 禁止生成链接到远程网页 --disable-internal-links* 禁止使用本地链接 --disable-javascript 禁止让网页执行JavaScript --disable-pdf-compression* 禁止在PDF对象使用无损压缩 --disable-smart-shrinking* 禁止使用WebKit的智能战略收缩，使像素/ DPI比没有不变 --disallow-local-file-access 禁止允许转换的本地文件读取其他本地文件，除非explecitily允许用 --allow --dpi <dpi> 显式更改DPI（这对基于X11的系统没有任何影响） --enable-plugins 启用已安装的插件（如Flash --encoding <encoding> 设置默认的文字编码 --extended-help 显示更广泛的帮助，详细介绍了不常见的命令开关 --forms* 打开HTML表单字段转换为PDF表单域 --grayscale PDF格式将在灰阶产生 --help Display help --htmldoc 输出程序HTML帮助 --ignore-load-errors 忽略claimes加载过程中已经遇到了一个错误页面 --lowquality 产生低品质的PDF/ PS。有用缩小结果文档的空间 --manpage 输出程序手册页 --margin-bottom <unitreal> 设置页面下边距 (default 10mm) --margin-left <unitreal> 将左边页边距 (default 10mm) --margin-right <unitreal> 设置页面右边距 (default 10mm) --margin-top <unitreal> 设置页面上边距 (default 10mm) --minimum-font-size <int> 最小字体大小 (default 5) --no-background 不打印背景 --orientation <orientation> 设置方向为横向或纵向 --page-height <unitreal> 页面高度 (default unit millimeter) --page-offset* <offset> 设置起始页码 (default 1) --page-size <size> 设置纸张大小: A4, Letter, etc. --page-width <unitreal> 页面宽度 (default unit millimeter) --password <password> HTTP验证密码 --post <name> <value> Add an additional post field (repeatable) --post-file <name> <path> Post an aditional file (repeatable) --print-media-type* 使用的打印介质类型，而不是屏幕 --proxy <proxy> 使用代理 --quiet Be less verbose --read-args-from-stdin 读取标准输入的命令行参数 --readme 输出程序自述 --redirect-delay <msec> 等待几毫秒为JS-重定向(default 200) --replace* <name> <value> 替换名称,值的页眉和页脚（可重复） --stop-slow-scripts 停止运行缓慢的JavaScripts --title <text> 生成的PDF文件的标题（第一个文档的标题使用，如果没有指定） --toc* 插入的内容的表中的文件的开头 --use-xserver* 使用X服务器（一些插件和其他的东西没有X11可能无法正常工作） --user-style-sheet <url> 指定用户的样式表，加载在每一页中 --username <username> HTTP认证的用户名 --version 输出版本信息退出 --zoom <float> 使用这个缩放因子 (default 1) 页眉和页脚选项--header-center* <text> (设置在中心位置的页眉内容) --header-font-name* <name> (default Arial) (设置页眉的字体名称)--header-font-size* <size> (设置页眉的字体大小)--header-html* <url> (添加一个HTML页眉,后面是网址)--header-left* <text> (左对齐的页眉文本)--header-line* (显示一条线在页眉下)--header-right* <text> (右对齐页眉文本)--header-spacing* <real> (设置页眉和内容的距离,默认0)--footer-center* <text> (设置在中心位置的页脚内容) --footer-font-name* <name> (设置页脚的字体名称) --footer-font-size* <size> (设置页脚的字体大小default 11)--footer-html* <url> (添加一个HTML页脚,后面是网址)--footer-left* <text> (左对齐的页脚文本)--footer-line* 显示一条线在页脚内容上)--footer-right* <text> (右对齐页脚文本)--footer-spacing* <real> (设置页脚和内容的距离)./wkhtmltopdf --footer-right '[page]/[topage]' http://www.baidu.com baidu.pdf./wkhtmltopdf --header-center '报表' --header-line --margin-top 2cm --header-line http://192.168.212.139/oma/ oma.pdf表内容选项中 --toc-depth* <level> Set the depth of the toc (default 3) --toc-disable-back-links* Do not link from section header to toc --toc-disable-links* Do not link from toc to sections --toc-font-name* <name> Set the font used for the toc (default Arial) --toc-header-font-name* <name> The font of the toc header (if unset use --toc-font-name) --toc-header-font-size* <size> The font size of the toc header (default 15) --toc-header-text* <text> The header text of the toc (default Table Of Contents) --toc-l1-font-size* <size> Set the font size on level 1 of the toc (default 12) --toc-l1-indentation* <num> Set indentation on level 1 of the toc (default 0) --toc-l2-font-size* <size> Set the font size on level 2 of the toc (default 10) --toc-l2-indentation* <num> Set indentation on level 2 of the toc (default 20) --toc-l3-font-size* <size> Set the font size on level 3 of the toc (default 8) --toc-l3-indentation* <num> Set indentation on level 3 of the toc (default 40) --toc-l4-font-size* <size> Set the font size on level 4 of the toc (default 6) --toc-l4-indentation* <num> Set indentation on level 4 of the toc (default 60) --toc-l5-font-size* <size> Set the font size on level 5 of the toc (default 4) --toc-l5-indentation* <num> Set indentation on level 5 of the toc (default 80) --toc-l6-font-size* <size> Set the font size on level 6 of the toc (default 2) --toc-l6-indentation* <num> Set indentation on level 6 of the toc (default 100) --toc-l7-font-size* <size> Set the font size on level 7 of the toc (default 0) --toc-l7-indentation* <num> Set indentation on level 7 of the toc (default 120) --toc-no-dots* Do not use dots, in the toc轮廓选项 --dump-outline <file> 转储目录到一个文件 --outline 显示目录(文章中h1,h2来定) --outline-depth <level> 设置目录的深度（默认为4）页脚和页眉 * [page] 由当前正在打印的页的数目代替 * [frompage] 由要打印的第一页的数量取代 * [topage] 由最后一页要打印的数量取代 * [webpage] 通过正在打印的页面的URL替换 * [section] 由当前节的名称替换 * [subsection] 由当前小节的名称替换 * [date] 由当前日期系统的本地格式取代 * [time] 由当前时间，系统的本地格式取代
作者：曹元
链接：https://juejin.im/post/6856547881873047559
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

在线咨询

上一篇：20 个最棒的 JavaScript 图表库
下一篇：「C#实战」一行代码搞定！高效移除HTML标签还原纯净文本

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

javascript 获取网页各种宽度

您的项目需求