vueprint（vueprintnb）

本篇文章给大家谈谈vueprint，以及vueprintnb对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、v-print打印插件使用
• 2、vue 使用打印（print-js）
• 3、vue调用本地打印的时候打印预览超出
• 4、vue 打印 vue-print-nb
• 5、vue v-print-nb 打印
• 6、vue vue-print-nb 打印

v-print打印插件使用

1.v-print-nb打印

A，安禅或戚装

npm install vue-print-nb --save

B，main.js全局安贺陵装

import Print from 'vue-print-nb'

Vue.use(Print);

C，使用

方团乱式一：直接打印

1.v-print=“printObj”

2.id为printMe的div盒子

方式二：转图片打印

[img]

vue 使用打印（print-js）

安装成功后，则蚂迟可以在当前目孙李录下得根目录下的package.json文件查看。

可物辩以全局引入即（在main.js中引入），也可以在需要的文件里面引入

vue调用本地打印的时候打印预览超出

vue调用本地打印的时候打印预览超出首先，为了使打兄早印昌尘埋按钮始终固定显示在页面上部，对id=”print”所在的div的高度进行了计算，使其正好布满剩余屏幕高度。v-html引用的datas是从后端请求来的，由于数据很耐蚂多，超出了一屏，且其父容器id=”print”设置了：overflow-y: auto;，使id=”print”容器出现了滚动条。

结果，点击打印按钮进行预览时，显示不全，后面的内容没有显示出来。原理：通过阅读vue-print-nb的源码，了解到vue-print-nb获取Id=”print”的内容，然后将这些内容放在了vue-print-nb新建的iframe的body标签中，同时将Id=”print”中的样式放在新建的iframe的style标签中。

然后经过各种转换、兼容，最终调用原生window.print()执行打印

vue 打印 vue-print-nb

常见的打印有JavaScript打印、jQuery、vue打印，这里主要讲述vue使用vue-print-nb进行打档衡印

只需要在组件的打印区域里，团颤给需要隐藏的内容的标签上添加

在全局样行或做式中，新增style media="print"/style标签，里面是打印时才生效的样式

vue v-print-nb 打印

参考链接： vue html页面打印功能vue-print-nb - 潇湘羽西 - 博客园

div 父级包裹不要！！加任何样式！！否则容易造成打印内容样式不起作用！！

 竖吵毁     div id="printInfo" class="print-container"

            此处为打印内容！！！

      /div

      div class="button-div"

        el-button v-print="printObj" type="primary"打印/el-button// 打印按钮 加上 v-print

      /div

    /div

export default {

  data () {

    return {

      printObj: { // 配置打印参数

        id: 'printInfo'碰乎, // 要打印的容器的id

        popTitle: '标签打印', // 页眉标题

        extraCss: '',

        extraHead: 'meta http-equiv="Content-Language"余备content="zh-cn"/'

      }

    }

  }

vue vue-print-nb 打印

npm install vue-print-nb --save

import Print from 'vue-print-nb'册首银 Vue.use(Print);

div id="printTest" p这州宴里面是要打印的内容/p/divbutton v-print="'芹敏#printTest'"打印/button

效果如图：

关于vueprint和vueprintnb的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。