window.print() 前端实现网页打印

2023-07-18 21:24| 来源: 网络整理| 查看: 265

window.print() 前端实现网页打印,将 DOM 中的 canvas 转为 image window.print()用于打印当前窗口的内容,默认打印页面 body 里的所有内容打印样式问题,之前调整好的样式和布局都没实现,那么怎么解决呢?

1.使用打印样式表

配置一份打印样式表 print.css，引入到 HTML 文档，在上加上一个 media=”print” 来标识这是打印机才会应用的样式表，这样打印的时候，就会默认将该样式表应用到文档中

复制代码

2.使用媒体查询

@media print { h1 { font-size: 20px; color: red; } } 复制代码打印指定区域的内容 printpage () { // const oldInnerHtml = window.document.body.innerHTML window.document.body.innerHTML = this.$refs.reportDetailRef.innerHTML window.print() window.location.reload() // window.document.body.innerHTML = oldInnerHtml return false }, 复制代码打印样式中的分页问题

1.page-break-before（指定元素前添加分页符）

值描述auto默认值,如果必要则元素前面插入分页符always在元素前插入分页符avoid避免在元素前插入分页符left在元素之前足够的分页符，一直到一张空白的左页为止right在元素之前足够的分页符，一直到一张空白的右页为止。inherit规定应该从父元素继承 page-break-before 属性的设置。

2.page-break-after（指定元素后添加分页符）

值描述auto默认值。如果必要则在元素后插入分页符。always在元素后插入分页符。avoid避免在元素后插入分页符。left在元素之后足够的分页符，一直到一张空白的左页为止。right在元素之后足够的分页符，一直到一张空白的右页为止。inherit规定应该从父元素继承 page-break-after 属性的设置。去除浏览器默认页眉页脚

页眉打印默认有页眉页脚信息，展现到页面外边距范围，我们可以通过去除页面模型 page 的外边距，使得内容不会延伸到页面的边缘，再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距

@media print { @page { margin: 0; } body { margin: 1cm; } } 复制代码遇到了 window.print() 导出时，内容区域有 echarts 图表，图表区域是个 canvas，导出后的 pdf 文件中 canvas 区域空白—>>>>>>>解决方法,获取 dom 中的 canvans,转成 img

1.获取到所有 canvans 的 dom

2.对应 echarts canvans 的位置创建 div,并通过 ref 拿到 dom

3.通过 canvans 的 toDataURL 方法吧 canvas 转成 img

GeneratepPicture() { this.fullscreenLoading = true const mainCanvas = document.getElementsByTagName('canvas') for (let i = 0; i < mainCanvas.length; i++) { const item = mainCanvas[i] const imgRef = this.$refs['canvans' + i] const mainImg = new Image() const mainImgSrc = item.toDataURL('image/png') mainImg.src = mainImgSrc mainImg.onload = () => { // 用图片替换 canvas imgRef.innerHTML = `` } } } 复制代码使 img 自适应 div 大小例子 div { width: 400px height: 400px border: 1px solid #000 } img { width: 100 % height: 100 % } 复制代码 vue-router 新窗口打开 1. router-link 2.window.open() 3.a标签 const routeUrl = this.$router.resolve({ path: '/reportDetail', query: row }) window.open(routeUrl.href, '_blank') 复制代码

【本文地址】

公司简介

联系我们