美文网首页
打印网页时,前端写法

打印网页时,前端写法

作者: Roseska | 来源:发表于2020-04-26 16:02 被阅读0次

打印网页时,在保证打印效果的前提下,前端要怎么写呢

1.在打印时调用的样式(px--->pt(打印时使用pt)、样式表、媒体查询)
//打印时example.css生效
<link href="/example.css" media="print" rel="stylesheet" />
//媒体查询
h1 {
  font-size: 14px;
}
//打印时的样式
@media print {
  h1 {
    font-size: 20px;
  }
}

用js控制

window.matchMedia 测试媒体查询接口
function myFunction(x) {
    if (x.matches) { // 媒体查询
        document.body.style.backgroundColor = "yellow";
    } else {
        document.body.style.backgroundColor = "block";
    }
}
 
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // 执行时调用的监听函数
x.addListener(myFunction) // 状态改变时添加监听器
2.手动调用打印方法

window.print()

1.window.print()
或
2.document.execCommand(”print”)
3.也可只打印部分内容(方法自行百度~)

相关文章

  • 打印网页时,前端写法

    打印网页时,在保证打印效果的前提下,前端要怎么写呢 1.在打印时调用的样式(px--->pt(打印时使用pt)、样...

  • 前端 直接打印解决方案

    前端 打印操作 取消弹出选择 问题描述:前端在执行打印操作时,浏览器会弹出 选择打印机等相关设置,在进行批量打印时...

  • 前端打印

    简单介绍一下前端打印的做法和一些问题 一、简介 前端打印即浏览器打印,是通过浏览器的打印功能来实现打印效果的做法。...

  • 前端打印

    使用window.print()打印 优点1.通过简单的代码就能调用打印机2.可以打印网页中任何内容 缺点不能调整...

  • 前端打印

    1.直接使用window.print() 打印 2.设置分页在需要分页的地方设置page-break-after:...

  • 前端打印

    方法1 步骤: 1、用html2canvas,将html转image2、image放入jsPDF中3、window...

  • 前端打印,vue打印

    按以下操作就成

  • Python概述

    版本python3.6 打印 打印hellow world出来 -- 注释的写法 -- 行注释: 以井号开头,可以...

  • 【vue学习】整合Lodop

    前端实现自动打印 批量打印 vue中使用lodop调用标签打印机 利用lodop打印控件轻松实现批量打印 本文主要...

  • iOS For循环执行AFNetworking请求

    需求:如下操作打印的文档为 一种写法:

网友评论

      本文标题:打印网页时,前端写法

      本文链接:https://www.haomeiwen.com/subject/unqjwhtx.html