使用vue3-print-nb打印时，出现多了一页空白页、a标签跳转

已于 2023-08-07 11:43:02 修改
阅读量706 收藏 1
点赞数 1
文章标签： html5 javascript css css3 vue.js scss html
于 2023-08-07 11:14:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyy_20021212/article/details/132142650
版权

1.在写项目中，使用vue3-print-nb插件打印时候，多了一页的空白页，找了一下问题，是给html给了高度100%，到那时由于项目已经到后期，所以给css加上了一段代码

<style lang="scss">
@media print {
  @page {
    size: auto;
    margin: 3mm auto;
    margin-bottom: 8mm;
  }
}

html {
    height: auto;
    margin: 0px;
}
</style>

然后对应打印的页面就打印的是该打印的页码，不会多一页。

2.a标签跳转情况

a标签后面加 target="_blank"

          <a
            :href="跳转的路径"
            target="_blank"
          >
            跳转的内容
          </a>

a标签后面加 target="_self" 是当前窗口默认打开 (默认的)

M+7~
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-print-nb:Vue插件，打印！ 好的！
05-12
vue-print-nb 这是用于包装，简单，快速，方便，轻便的指令包装纸。 安装 Vue2版本： npm install vue-print-nb --save import Print from 'vue-print-nb' // Global instruction Vue . use ( Print ) ; //or // Local instruction import print from 'vue-print-nb' directives: { print } Vue3版本： npm install vue3-print-nb --save // Global instruction import { createApp } from 'vue' import App from './App.vue' import print from 'vue3-p
vue-print-nb 兼容低版本浏览器
11-28
vue-print-nb 兼容低版本浏览器 import Print from '@/lib/vue-print-nb/print.umd.min' Vue.use(Print)
使用VUE的打印插件（vue-print-nb）出现多打印一个空白页的问题
NotDreamFish的博客
09-27 3320
先说结论：html标签的高度如果设置为100%，打印div的高度设不设置都会多一个空白页。 经过是这样的： 最近同事写一个项目，但是遇到了一个问题，使用vue-print-nb打印时，预览中一定会出现两页，并且打印的div没有设置高度也没有设置margin。我创建一个新测试项目后发现新项目不会出现两页的情况，一度怀疑是不是被什么插件影响到了。 后来商量以后同事提出可能是继承了父高度，于是我把原项目涉及打印div的父高度的css全都复制了过来，果然出现两页了，问...
python教程（四）之字典（3.字典格式）
由浅入深？
05-20 455
这个标题的理解应该是用字符串格式的方法设置字典 a={"bob":"friend","charly":"friend","herry":"normal","hermione":"girlfriend"} print("hermione is my {hermione}".format_map(a)) #hermione is my girlfriend #format_map是字典特有的格式设置方法，非常便利，下面再来一个例子 b=''' <html> <head> &
vue打印问题（分页打印、批量打印条形码）
俺也不敢问
03-30 5315
前言 项目需求打印功能所遇到的问题。在此记录，望能帮到你 一下问题： 当内容超过一页时不会自动分页？ 当使用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-print-nb打印预览时多一张空白页
weixin_42234899的博客
05-11 1503
vue打印多出空白页
vue3-print-nb 实现页面打印（含分页打印）
u013553807的博客
03-03 5588
html的打印
解决vue-print-nb打印时多出一页空白，vue-print-nb打印有空白页
qq_51055690的博客
04-16 2738
vue实现打印功能（vue-print-nb），解决vue-print-nb每次打印都会多出一张空白页，打印多一张空白
打印并实现分页
qq_42882723的博客
07-21 709
print.js // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) ===
vue3 如何实现打印功能
m0_52946104的博客
08-08 2150
vue3 实现打印
vue中使用vue-print.js实现多页打印
11-21
由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装 下载 print.js ...
vue-print:基于vue-print-nb打印组件做的功能拓展
05-07
vue-print基于vue-print-nb打印组件的拓展功能,下载后放在项目中引用详情请看博客介绍Installmain.js文件引用import Print from './xxxx/vue-print-nb/src'Vue.use(Print);
vue-print-nb插件打印预览总是多一张空白页
langligelangxy的博客
07-27 251
【代码】vue-print-nb插件打印预览总是多一张空白页。
html中页面被上一页覆盖,js与css实现弹出层覆盖整个页面的方法
weixin_33001177的博客
06-04 775
本文实例讲述了js与css实现弹出层覆盖整个页面的方法。分享给大家供大家参考。具体实现方法如下：弹出层透明背景加框的常用样式和结构如下:.alertMessageBg{position:fixed;_position:absolute;width:100%;height:100%;left:0;top:0;background:#000;opacity:0.5;-moz-opacity:0.5;f...
print-vue-nb插件打印表格多页，内容顶格问题优化
sven_chen93的博客
03-26 840
这样第二页就不会出现顶格了，只是每页多加了一个空白行，设置thead的border为白色就看不到边框了。后面换了下printjs插件，效果不是很好；后面大佬提示可以加个thead标签。只看大家还有更好的办法没。
解决vue-print-nb每次打印都会多出一张空白页
qq_42544091的博客
08-05 3556
解决vue-print-nb每次打印都会多出一张空白页
Vue3+vue3-print-nb 实现分页打印功能
Z1014h的博客
01-08 1852
注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id。只需要给不自动换行的标签加上。3. 样式布局不生效问题。
vue实现打印功能（可多页打印）
weixin_52473844的博客
11-13 811
当我们使用插件时，发现只能打印一张，很难受，现在封装了一个可以多页打印的工具类，简单方便，话不多说，直接上代码。
【html5】04-操作DOM元素
最新发布
m0_68467925的博客
05-19 953
dom获取单个、多个元素；类名操作： Dom.classList.add("类名"): 给当前dom元素添加类样式 Dom.classList.remove("类名");classList.contains("类名"); classList.toggle("active"); 自定义属性的获取与设置
vue3-print-nb如何打印多张标签
09-16
要使用vue3-print-nb打印多张标签，您可以按照以下步骤进行操作： 1. 首先，确保已经安装了vue3-print-nb。您可以使用以下命令进行安装： ``` npm install vue3-print-nb --save ``` 2. 在您的Vue应用程序中，可以通过以下方式导入并使用打印指令： ```javascript import print from 'vue3-print-nb' import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.directive('print', print) app.mount('#app') ``` 3. 在您的Vue组件模板中，您可以使用`v-print`指令来定义需要打印的内容： ```html <template> <div> <button @click="printMultipleLabels">打印多张标签</button> <div v-print> <!-- 这里是需要打印的内容 --> <!-- 可以使用v-for循环生成多个标签 --> </div> </div> </template> ``` 4. 在Vue组件的方法中，您可以创建一个用于触发打印的函数，例如`printMultipleLabels`： ```javascript export default { methods: { printMultipleLabels() { // 在这里执行打印操作 // 您可以使用window.print()方法来触发浏览器的打印功能 } } } ``` 5. 最后，当用户点击"打印多张标签"按钮时，调用`printMultipleLabels`方法，即可触发浏览器的打印功能，打印您定义的多张标签。 请注意，具体的打印样式和页面布局将取决于您在打印内容的CSS样式中定义的规则。您可以通过在打印样式中使用`@media print`媒体查询来自定义打印时的样式。 希望这些步骤对您有帮助！如果您有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值