search

Alessandro-Pang / vue-print-next

基于 vue3-print-np 改造的 vue 打印库，使用 Typescript 重构，对 vue3 setup 有更好的支持，支持手动调用打印函数等。
https://alexpang.cn/vue-print-next
MIT License
30 stars 3 forks source link

有自动分页的选项吗？没有的话，如何手动分页？ #5

Closed qq2982476894 closed 3 months ago

qq2982476894 commented 3 months ago

image 这是局部打印出来的效果，有滚动条。 image

打印样式用了page-break-after也是没有正确分页的。 @media print {

printMe {

  box-shadow: none;
  width: auto;
  height: auto !important;
  padding: 0;
  margin-bottom: 0;
  zoom: 0.8;
  background-color: transparent;
}
.pagebreak {
  page-break-after: always !important;
}

}

Alessandro-Pang commented 3 months ago

我推测你绑定 id 为 printMe 的元素不是最小容器

意思是，你需要将有滚动条的那个元素， id 设置为 printMe

Alessandro-Pang commented 3 months ago

我推测你绑定 id 为 printMe 的元素不是最小容器

意思是，你需要将有滚动条的那个元素， id 设置为 printMe

qq2982476894 commented 3 months ago

我推测你绑定 id 为 printMe 的元素不是最小容器

意思是，你需要将有滚动条的那个元素， id 设置为 printMe 是的，我已经把id绑定到有滚动条的元素上了，高度是3021px，还是没有分页打印成功。 image

Alessandro-Pang commented 3 months ago

可以提供一下这个页面代码示例么

qq2982476894 commented 3 months ago

可以提供一下这个页面代码示例么

我重新写了一个页面的代码示例，准备发给你时，测试结果可以分页。我重新检查看下原项目为什么会出现不能分页的情况。

Alessandro-Pang commented 3 months ago

好的

qq2982476894 commented 3 months ago

image 这是局部打印出来的效果，有滚动条。 image

打印样式用了page-break-after也是没有正确分页的。 @media print { #printMe { box-shadow: none; width: auto; height: auto !important; padding: 0; margin-bottom: 0; zoom: 0.8; background-color: transparent; } .pagebreak { page-break-after: always !important; } }

j

好的

解决了 原项目样式里html设置了一个overflow:hidden。找半天才找到。服了

Alessandro-Pang commented 3 months ago

解决了 原项目样式里html设置了一个overflow:hidden。找半天才找到。服了

哈哈哈哈 🤣，解决了就好