关于window里边v-print打印问题

发布于 2022-09-13 00:10:35 字数 314 浏览 22 评论 0

主要遇到的问题是
点击打印按钮之后 ,他自始至终始终就只有一页,无论多少内容,就打印一页,内容多的东西,预览就显示一页结束的地方,导致少了好多内容
看了看百度的各种方法 ,不是媒体查询设宽高的 就是各式各样的 感觉不靠谱
希望有好的解决方法
感谢阅读的各位

main.js

代码


如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

三生殊途 2022-09-20 00:10:35

提供一下复现代码。

当然了,你可以看看有没有什么 max-height: 100%之类的。或者布局是不是普通的布局。然后排查一下有没有针对打印设置的样式。

我通过设置样式,实现过只能打印一页。用于打单子的时候,切割多余部分。

戒ㄋ 2022-09-20 00:10:35

没见你代码给一个我这边例子(vue-print-nb)组件你参考下:

Main.js里面

  import Print from 'vue-print-nb' 
  Vue.use(Print)        // 全局注册打印组件     

页面:

  <a-button class="subBtn" size="small" v-print="printObj"><a-icon type="printer" />打印</a-button>

数据:(给打印区域设置100%高度)

Data(){ 
  Return{ 
    printObj: {       //打印对象属性,关联按钮的v-print="printObj"
      id: 'myTable',  //关联你打印区域,比如table标签里给一个 id="myTable"
      popTitle: "",   //打印名就是A4纸上一行小字,我默认为空
      extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> .ant-table-body { max-height: 100%!important; } <style>',  //我用的是蚂蚁组件,这里我设置了.ant-table-body 100%高度。
    }, 
  }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文