精华内容
下载资源
问答
  • window如何打印屏幕
    千次阅读
    2017-10-23 10:27:22

    1.浏览器的内部窗口宽度(兼容写法):window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth                                                      浏览器的内部窗口高度(兼容写法):window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

    2.屏幕的可用(可工作)宽度:window.screen.availWidth                                                                                                                                                                            屏幕的可用(可工作)高度:window.screen.availHeight

    3.网页可见区域宽度:document.body.offsetWidth(包括边线的宽)                                                                                                                                                            网页可见区域高度:document.body.offsetHeight(包括边线的高)

    4.网页正文全文宽:document.body.scrollWidth                                                                                                                                                                                              网页正文全文高:document.body.scrollHeight

    5.网页被卷去的高:document.body.scrollTop                                                                                                                                                                                                网页被卷去的左: document.body.scrollLeft

    6.网页正文部分上: window.screenTop
       网页正文部分左: window.screenLeft

    7.屏幕分辨率的高: window.screen.height
       屏幕分辨率的宽: window.screen.width


    更多相关内容
  • window 系统最好用的屏幕拾色器,window 系统最好用的屏幕拾色器
  • window.print打印pdf

    千次阅读 2020-05-15 23:35:00
      前端打印pdf就是使用原生的window.print()方法实现,这里有几个问题你会遇到。 打印纸张大小,不同纸张大小,你需要相应调整表格宽度和最大分页高度 分页时机,不适当的话会导致表格跨页分断 背景色打印,这个...

    1、前言

      前端打印pdf就是使用原生的window.print()方法实现,这里有几个问题你会遇到。

    • 打印纸张大小,不同纸张大小,你需要相应调整表格宽度和最大分页高度
    • 分页时机,不适当的话会导致表格跨页分断
    • 背景色打印,这个是不能设置的,但是通过css属性可以实现
    • 打印时的css设置

    前端环境:vue+element ui

    2、代码实例

    <template>
        <div>
            <div id="toolBox">
                <div class="toolBox">
                    <el-button type="primary" plain size="small" style="margin-top: 20px;width: 130px;" @click="saveAsPdf">
                        打印PDF
                    </el-button>
                </div>
            </div>
            <div :id="tableConfig.pdfId" :class="tableConfig.pdfClass" v-for="(tableConfig,configIndex) in tableConfigList"
                 :key="configIndex">
                <div class="thisPage">
                    <h1 style="text-align: center">window.print方法demo</h1>
                </div>
                <div class="thisPage" v-for="(data,index) in dataList" :key="index" :style="tableConfig.tableStyle">
                    <el-table :data="data" :header-cell-style="tableHeader" border>
                        <el-table-column column-key="col1_" prop="col1_" label="第一列"></el-table-column>
                        <el-table-column column-key="col2_" prop="col2_" label="第二列"></el-table-column>
                        <el-table-column column-key="col3_" prop="col3_" label="第三列"></el-table-column>
                        <el-table-column column-key="col4_" prop="col4_" label="第四列"></el-table-column>
                        <el-table-column column-key="col5_" prop="col5_" label="第五列"></el-table-column>
                    </el-table>
                    <el-divider></el-divider>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: 'windowPrint',
            data() {
                return {
                    data: {
                        col1_: '',
                        col2_: '',
                        col3_: '',
                        col4_: '',
                        col5_: ''
                    },
                    dataList: [],
                    tableHeader: {
                        'color': 'aliceblue',
                        'background-color': 'slateblue'
                    },
                    tableConfigList: [{
                        pdfId: 'comment_report',
                        pdfClass: '',
                        tableStyle: `'100%'`
                    }, {
                        pdfId: 'print_report',
                        pdfClass: 'comment_hide',
                        tableStyle: `width:1100px;`
                    }]
                }
            }, methods: {
                getData() {
                    let keys = Object.keys(this.data);
                    let size = 35;
                    for (let i = 0; i < size; i++) {
                        this.dataList[i] = new Array();
                        for (let j = 0; j < i; j++) {
                            let tempData = {};
                            keys.forEach(key => {
                                tempData[key] = key + i + j;
                            })
                            this.dataList[i][j] = tempData;
                        }
                    }
                    this.dataList[size] = [];
                },
                saveAsPdf() {
                    let commentReport = document.getElementById("comment_report");
                    let printReport = document.getElementById("print_report");
                    let toolBox = document.getElementById("toolBox")
                    toolBox.className = "print_hide";
                    commentReport.className = "print_hide";
                    printReport.className = "print_content";
    
                    let thisPage = printReport.querySelectorAll('.thisPage');
                    let curHeight = 0;
                    let a3PageHeight = 1558;
                    for (let item of thisPage) {
                        let contentHeight = parseInt(window.getComputedStyle(item).height)
                        if ((curHeight + contentHeight) > a3PageHeight) {
                            console.log("a page")
                            item.style.pageBreakBefore = "always";
                            // 清空
                            curHeight = 0;
                        }
                        if(contentHeight<a3PageHeight){
                            curHeight += contentHeight
                        }else {
                            curHeight = contentHeight % a3PageHeight
                        }
                        console.log("item", contentHeight, curHeight);
                    }
                    setTimeout(() => {
                            window.print();
                            toolBox.className = "toolBox";
                            printReport.className = "comment_hide";
                        }, 1000
                    )
                }
            },
            created() {
                this.getData();
            }
        }
    </script>
    
    <style scoped>
        .toolBox {
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: right;
            background: rgba(0, 0, 0, 0.3);
            box-shadow: 2px 2px 3px #e4e4e4;
            z-index: 9999;
        }
    
        .toolBox .el-button {
            margin: 0;
            transform: translate(-50%, -40%);
        }
    
        @page {
            size: A3;
            margin: 0;
        }
    
        .comment_hide {
            display: none;
        }
    
        @media print {
    
            .print_hide {
                display: none;
            }
    
            .print_content {
                margin-top: 20px !important;
                -webkit-print-color-adjust: exact;
                -moz-print-color-adjust: exact;
                -ms-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
    </style>
    

    3、代码解析

    • 背景色打印

    需要打印的内容包含在这个css属性里面的class即可

    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
    
    • 打印时的css设置
      @media print{}这个css里面的属性会在打印时才会运行渲染

    • 打印纸张大小

       @page {
            size: A3;
            margin: 0;
        }
    

    在@page里面可以设置纸张大小,这里设置的是A3大小,至于宽高,网页打印的宽高好像是跟屏幕有关,这里设置宽1100px刚好更我屏幕打印时的宽度相当,每页高度这里选用1558px,高度好像相对稳定。

    • 分页时机
      这里分页是根据你的控件高度计算而知的,当累计高度高于分页高度则将当前控件前插入分页符,设置方法如下:
    item.style.pageBreakBefore = "always";
    

    通过设置style为page-break-before:always实现
    ps:网上全是page-break-after:always实现的,难道page-break-before不香么

    • html结构
      1、这里是通过tableConfigList这个配置变量,控制两个大的div的id、class和table的宽度
      2、每个需要分页的控件都用class="thisPage"标记,便于查找
      3、绘制两次需要网页内容,一次是用于用户看的,一次是用于打印的隐藏内容,打印的时候,设置隐藏用户看的,显示打印的内容,实现直接打印,而不影响用于观感

    • 解析saveAsPdf方法

     	saveAsPdf() {
                    let commentReport = document.getElementById("comment_report");
                    let printReport = document.getElementById("print_report");
                    let toolBox = document.getElementById("toolBox")
                    toolBox.className = "print_hide";
                    commentReport.className = "print_hide";
                    printReport.className = "print_content";
    
                    let thisPage = printReport.querySelectorAll('.thisPage');
                    let curHeight = 0;
                    let a3PageHeight = 1558;
                    for (let item of thisPage) {
                        let contentHeight = parseInt(window.getComputedStyle(item).height)
                        if ((curHeight + contentHeight) > a3PageHeight) {
                            console.log("a page")
                            item.style.pageBreakBefore = "always";
                            // 清空
                            curHeight = 0;
                        }
                        if(contentHeight<a3PageHeight){
                            curHeight += contentHeight
                        }else {
                            curHeight = contentHeight % a3PageHeight
                        }
                        console.log("item", contentHeight, curHeight);
                    }
                    setTimeout(() => {
                            window.print();
                            toolBox.className = "toolBox";
                            printReport.className = "comment_hide";
                        }, 1000
                    )
                }
    

    1、获取用于显示的report内容和用于打印的report内容
    2、将toolBox、commentReport、printReport对应class的html元素,设置class为print时的才会渲染的class
    3、控制page-break-before:always属性的设置,当加上当前元素,超过页高度,则当前元素设置style为page-break-before:always,提示print方法这里要分页
    4、处理单页超过打印纸张大小问题,这里超过了,没有去处理,只处理了超过后下一个元素加上不超过纸张高度下,追加上下一个元素
    5、最后要设置延时,不然会渲染不足。

    在这里插入图片描述
    demo地址:https://github.com/Hitvz/pdfoutput
    参考博客:vue+element打印页面功能

    展开全文
  • vue window.scrollTo屏幕滚动

    千次阅读 2019-01-25 11:05:24
    获取高度和滚动高度 滚动到一定高度导航栏跟着变化 点击导航栏 跳转到指定位置

    获取高度和滚动高度

    在这里插入图片描述
    滚动到一定高度导航栏跟着变化

    在这里插入图片描述

    在这里插入图片描述

    点击导航栏 跳转到指定位置

    在这里插入图片描述

    展开全文
  • >> 可在任意组件中使用; 1.在data中定义一个变量,用于...2.使用window.onresize方法获取屏幕尺寸; mounted() { this.screenWidth = document.body.clientWidth window.onresize = () => { ...

    >> 可在 任意组件 中使用;

     

    1.在data中定义一个变量,用于记录屏幕尺寸;

    data(){
        return{
            screenWidth: null, 
        }
    }

    且做好定义为 null

    2.使用 window.onresize 方法获取屏幕尺寸;

     mounted() {
        this.screenWidth = document.body.clientWidth
    
        window.onresize = () => {
          return (() => {
            this.screenWidth = document.body.clientWidth
          })()
        }
      },

    需要在 mounted() 钩子中

    3.使用 watch 方法即可实时监听屏幕尺寸;

    watch: {
        screenWidth: {
          handler: function (val) {
            if (val < 900) {
              console.log(val+'屏幕宽度小于900px')
            } else {
              console.log(val+'屏幕宽度大于900px')
            }
          },
          immediate: true,
          deep:true
        },
      }

    搞定!

    展开全文
  • window.print()打印页面 宽度为1000

    千次阅读 2020-02-28 13:16:11
    使用window.print()得时候 如果Body 没设置宽度 或者为100%得时候 打印页面得宽度 为700~800 多了会被裁掉! 当设置body宽度后 以我这边为例 body 1200px 的时候 主体要打印得元素 给 1000px 结果就能打印 1000宽度...
  • 修改的方法是这样的 下载nircmd: http://www.nirsoft.net/utils/nircmd.html 修改分辨率: ./nircmd.exe setdisplay 1280 720 32 ./nircmd.exe setdisplay 1024 768 32 ./nircmd.exe setdisplay 800 600 32
  • // 监听屏幕转动 window.addEventListener('orientationchange',function(){ var orientation = window.orientation; switch(orientation){ case 90: case -90: orientation = 'landscape'; //这里是横屏 ...
  • window下如何设置屏幕扩展

    千次阅读 2019-09-02 20:38:15
    对于Window 10操作系统的电脑: 第一步: 先点击鼠标右键,然后点击显示设置,如图: 第二步: 之后点击确认即可!
  • js得到屏幕宽高、页面宽高 (window.screen.availHeight) window.screen.availWidth 返回当前屏幕宽度(空白空间)  window.screen.availHeight 返回当前屏幕高度(空白空间)  window.screen.width 返回...
  • window7小工具,屏幕标尺,各种单位转换window7小工具,屏幕标尺,各种单位转换window7小工具,屏幕标尺,各种单位转换window7小工具,屏幕标尺,各种单位转换window7小工具,屏幕标尺,各种单位转换window7小工具,...
  • 在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度。每每到这个时候不知道使用哪个: widow.document.body.offsetWidth; window.screen.availWidth; window.screen.width; 一上图(PC端)为例, A...
  • 查看屏幕分辨率dumpsys window displays

    千次阅读 2018-04-09 11:44:32
    dumpsys window displays
  • window.print()&nbsp; 实际上,是浏览器打印功能菜单的一种程序调用,设置打印参数,比如纸型,页边距,选择打印机等等。需要指出的是这种方法提供一个打印前和打印后的事件onbeforeprint、onafterprint。可以在...
  • 转载 ... 1、首先使用 Win+R 组合快捷bai键打开Win10运行对话框,输入命令:regedit 回车 2、打开注册表编辑器后,依次展开位置:HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Class{4d36e968-e325-11ce-bfc1-...
  • 1.页面定义打印div按钮: <!-- 打印机按钮开始 --> <div style="position: absolute;top:100;right:0px;z-index: 9999;background-color:#EDEDED"> ...
  • window.open打开新窗口屏幕居中

    千次阅读 2018-05-12 22:39:31
    window.open(url,name,'width='+newWinWidth+',height='+newWinHeight+',left='+left+',top='+top+',toolbar=no,menubar=no,location=no,status=no'); //name:弹出窗口的名字,可不填,用''代替 //...
  • window.onresize监听div和屏幕的改变

    万次阅读 2016-08-12 11:32:26
    监听屏幕的改变:<!DOCTYPE html> <title></title> , maximum-scale=1.0, minimum-scale=1.0, user-scalable=
  • window窗口尺寸和window.screen屏幕尺寸的正确理解
  • window.print()方法打印

    千次阅读 2019-06-10 14:17:16
    由于项目中用到了打印功能,也在网上查询了些方法,总体来说有两个思路: 1. dom替换 2. 新窗口打印 dom替换会导致事件失效,如果重新加载的话又会影响到体验;而新窗口缺因为样式问题也不好解决,都不满足项目的...
  • unity控制台上的信息打印屏幕

    千次阅读 2018-04-20 19:28:02
    接上一个汽车控制,现在我需要实现的是在汽车跑的时候实时打印它的速度在屏幕上,我们都知道如果直接Debug.Log()的话,它打印在控制台上,我们只需要制作一个GUI窗口,打印log就可以了,这个功能是一位大佬转一个...
  • window VNC Viewer设置屏幕分配率

    万次阅读 2017-06-27 22:47:35
    问题:远程时,显示的界面不会跟着本机屏幕大小而自动调节,导致无法在页面中完全显示屏幕的内容。 解决1:打开VNC Viewer,选择Options,在Scale to window size 前面打勾。然后输入VNC server 地址,点击connect ...
  • GetSystemMetrics()函数,获取屏幕的分辩率,这个分辩表示的是当前显示的分辨率。 通过设置标识符获取相应的值 ,例如,获取屏幕的宽度和高度 int width = GetSystemMetrics(SM_CXSCREEN); //屏幕宽度 int height...
  • Unity 3D 捕获错误日志 打印屏幕

    千次阅读 2019-10-17 13:02:56
    错误日志的现场往往是非常珍贵的,...所以可以监听错误以及异常,并及时打印屏幕上。 using System.Collections.Generic; using UnityEngine; public class ErrorLogOnGUIMyTools : MonoBehaviour { private...
  • dialogHide:{ yes | no | 1 | 0 | on | off }://在打印或者打印预览时对话框是否隐藏。默认为no。 edge:{ sunken | raised }://指明对话框的边框样式。默认为raised。 unadorned:{ yes | no | 1 | 0 | on | off }...
  •  屏幕取词 function getWord(){ var word = window .getSelection ?window .getSelection ():document .selection .createRange () .text ; alert( word ) } document .body .addEventListener ( "click" , ...
  • window.open(“url”) 这样的window.open大家想必都熟悉。但是 **window.open(URL,name,features,replace)**实际上是这样的,可接受四个参数,来控制窗口属性。 下面就说一下 这四个参数都代表什么: 参数 描述 ...
  • Android之window机制token验证

    千次阅读 多人点赞 2020-10-13 20:46:55
    这篇文章讲解关于window token的问题,同时也是Context机制和Window机制这两篇文章的一个补充。如果你对Android的Window机制和Context机制目前位了解过,强烈建议你先阅读前面两篇文章,可以帮助理解整个源码的解析...
  • window下,可执行脚本运行结果保存到文件的同时显示在屏幕方法: 如window下的可执行脚本run.bat内容: command A command B command C 目标:将run.bat运行结果在终端屏幕上显示并保存到文件result.xml中 ...
  • Flutter获取屏幕相关尺寸

    千次阅读 2019-08-06 14:32:11
    class Screen { static double get width { MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window); return mediaQuery.size.width; } static double get height { MediaQueryData ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 241,108
精华内容 96,443
热门标签
关键字:

window如何打印屏幕