vue+element实现打印，不显示空白页

最新推荐文章于 2024-01-05 18:20:34 发布

原创最新推荐文章于 2024-01-05 18:20:34 发布 · 952 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS媒体查询@mediaprint针对打印设备优化网页布局的方法。通过定义特定的样式规则，如display、width、height和overflow等属性，可以确保在打印时网页元素能够正确显示。

@media print {
  #printTest{//要打印的区域
    display: block;
    width:100%;
    height:auto;
    overflow: hidden;
  }
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_32496215

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue + element-ui 【前端项目一】控制某个页面不显示导航栏 4

wgchen

09-30

1711

Vue + element-ui 【前端项目一】控制某个页面不显示导航栏 4

vue+element 动态生成二维码并选择批量打印表格内容

weixin_46607967的博客

11-04

3551

下载生成二维码的插件(vue-qr) npm install vue-qr --save 下载打印库(printJS) npm install print-js --save 在main.js里引入引入vue-qr的两种方式 // vue2.0 引入Vue-qr import VueQr from 'vue-qr' // vue3.0 引入Vue-qr import vueQr from 'vue-qr/src/packages/vue-qr.vue' new Vue({

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

王祖贤 2020.09.07
有用,牛逼

vue+element实现打印页面功能

10-16

主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

Vue使用printJS导出网页为pdf、printJS导出pdf、空白页解决、自定义页脚

林中明月间丶

01-05

4049

需求：网页已经写成了pdf的样式，需要点击导出pdf按钮调用浏览器系统预览-打印。,覆盖外面原有的样式,以去除一些打印时不需要的而原HTML中有的样式。在我们想打印内容的标签上添加id，如下。在想要引入的页面中添加如下代码。

解决vue-print-nb打印时多出一页空白，vue-print-nb打印有空白页

qq_51055690的博客

04-16

4987

vue实现打印功能（vue-print-nb），解决vue-print-nb每次打印都会多出一张空白页，打印多一张空白

vue 打印类多打印空白页

迪奥乔斯达的博客

01-13

297

这里是print.js的问题不能用npm安装需要手动下载到本地，而且要做些新修改下载地址 https://github.com/zxc19890923/print/blob/master/print.js // 搜索getStyle方法，添加：str += "<style>html,body,div{height: auto!important;font-size:14px}</style>"; getStyle: function () { var str = "",

vue+element 点击按钮,连接打印机,先预览并打印指定板块页面内容

weixin_47644222的博客

02-02

1961

前端页面连接打印机预览打印指定页面内容 div打印的style写在js内,无法被打印机识别解决办法: 1.直接写在div标签内 2.规定打印机打印的单独格式,单独格式写出来就是只有打印的情况下使用 3.引入打印格式的链接 (需要npm安装引入print 页面指定内容qrCode,预览和打印时,会自动填充打印时的边距注意事项: 1.页面样式和打印预览样式不会完全一样,并且会直接扣出qrCode的内容放进打印机的打印区域内(有打印边距,内容自动填充) 2.页面识别的html的长度单位大小单位和

Vue+ElementUI使用vue-pdf实现预览功能

10-15

以下是从给定文件信息中提取出的关于实现Vue+ElementUI中使用vue-pdf实现PDF预览功能的知识点。首先，要使用vue-pdf插件，需要通过npm命令安装vue-pdf依赖到项目中。安装的命令是npm install --save vue-pdf。安装...

vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查

i_am_a_div的博客

12-23

6552

vue+element实现树状表格，使用树形数据与懒加载实现树状表格的增删改查

VUE+Element UI搭建后台管理

weixin_43395693的博客

03-20

1126

VUE+Element UI搭建后台管理一、安装Element1. 安装Vue1. 安装node环境2.安装Vue的脚手架工具vue-cli3.安装二、搭建后台管理系统1. 安装并引入Element-UI2. Container 布局组件3. NavMenu 导航菜单组件4. Vue Router 嵌套路由一、安装Element 1. 安装Vue 在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也

element ui 表格动态列显示空白bug 修复方法

10-18

今天小编就为大家分享一篇element ui 表格动态列显示空白bug 修复方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

VUE3开发时window.print()遇到的打印空白问题以及解决

m0_67279243的博客

01-03

1421

因为开发是使用的内网环境无法上传，只能意识流描述问题，客户需求是需要做一个打印功能，我的解决方案是点击打印后跳转staticRouter中调整好的页面中调用window.print()进行打印，其中外层组件不设置高度使得打印可以自动分页，但是出现了当分页时一个<el-table被分页隔开成两个部分之后上方的<el-table数据部分全空白，第一条数据在第二页下方出现，这会极大影响客户使用感受。暂时没搞懂，请各位大佬指正，我因为主要是java后端工程师，前端技术实在捉襟见肘。附一则ChatGPT4解答。

css打印如何去掉空白页,vue打印会多出一页空白页的坑

weixin_29147539的博客

08-03

2118

在vue项目上需要打印功能，使用了vue-print-nb这个打印组件。但是在使用的时候一直会有一个问题：就是打印的时候总会在结尾多出一页空白页。经过一系列踩坑排查终于发现，原来是因为我的样式上对html，body，设置了高度100%。html, body, #app {margin: 0;padding: 0;height: 100%;}在打印的时候，虽然我们肉眼认为是空白的，但是系统认为是有内...

Vue前端使用Window.print打印页面，能根据表格数量分页，空白页问题解决（一看就懂）

qq_52753722的博客

11-15

2720

windows.print()打印

VUE项目实践——浏览器打印时canves打印预览空白问题

Y_anCy的博客

07-10

3851

//浏览器打印 <div @click="doPrint()">打印</div> <div id="report-body" >内容<div> //打印 doPrint: function() { let newstr = document.getElementById('report-body').innerHTML; let oldstr...

vue打包页面空白（最完美的解决办法）

nannanWEB的博客

10-15

3100

vue打包页面空白，什么都不显示（解决）当打完包的时候，可以看到它提示一句话 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won’t work. 这句话的意思就是打包的文件必须要通过服务启动，，直接打开无效。看到这句话就蒙了，不知道怎么改，就去百度了，...

vue+element 分页current-page设置页码失效问题

qi琪的专栏

04-29

4268

需求：每经过一次新的查询后，分页页码就要调到第一页。我设置查询后current-page = 1问题：如果已经跳转到了下一页，在次查询，current-page = 1 会失效。经查资料： element 对双向绑定支持的不是很好。使用vue的sync修饰符。解决方案：将 current-page换成 current-page.sync [已验证] ...

vue+elementUI 打印pdf文件

qq_42897782的博客

12-02

3756

后台管理系统里经常需要打印功能，常见的是打印页面对象，但是打印指定的pdf文件就比较麻烦，这里就实现了，把需要打印的pdf文件放在一个iframe里，然后在子窗口打印用户操作：点击按钮可以触发打印（如下图）效果如下具体代码如下 methods: { // 打印 doPrint() { console.log("触发打印"); let filePath = "/static/JavaScript高级程..

vue打印问题（分页打印、批量打印条形码）

俺也不敢问

03-30

6190

前言项目需求打印功能所遇到的问题。在此记录，望能帮到你一下问题：当内容超过一页时不会自动分页？当使用vue3-barcode 打印条形码时，不能批量打印？基础打印安装官网地址：https://github.com/Power-kxLee/vue3-print-nb npm install vue3-print-nb --save 引用 // Global instruction import { createApp } from 'vue' import App from

使用vue+element设置显示三个边框中间有间隔