vue-print-nb 实现打印功能 (兼容低版本谷歌浏览器)

admin管理员组

文章数量:1538748

下面是在谷歌47版本打印预览：

1.Vue2.0版本

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   
}

2.Vue3.0版本：

npm install vue3-print-nb --save

// Global instruction 
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

//or

// Local instruction
import print from 'vue3-print-nb'

directives: {
    print   
}

使用方法：

HTML:

 <div id="printMe" style="background:red;">
        <p>葫芦娃，葫芦娃</p>
        <p>一根藤上七朵花 </p>
        <p>小小树藤是我家 啦啦啦啦 </p>
        <p>叮当当咚咚当当　浇不大</p>
        <p> 叮当当咚咚当当 是我家</p>
        <p> 啦啦啦啦</p>
        <p>...</p>
    </div>

    <button v-print="'#printMe'">Print local range</button>

JavaScript:

export default {
    data() {
        return {
           printLoading: true,
            printObj: {
              id: "printMe",
              popTitle: 'good print',
              extraCss: "https://cdn.bootcdn/ajax/libs/hover.css/2.3.1/css/hover-min.css",
              extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
              beforeOpenCallback (vue) {
                vue.printLoading = true
                console.log('打开之前')
              },
              openCallback (vue) {
                vue.printLoading = false
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

参数	作用	类型	可选项	默认
id	局部打印有效，	标识符	String	‘printId’
standard	局部打印有效，打印的文本类型	String	HTML5/loose/strict	HTML5
extraHead	局部打印有效，添加在打印区域的最顶端	String	-	-
extraCss	局部打印有效，为打印区域提供Stylesheet样式表	String	-	-
popTitle	局部打印有效，编辑页眉的标题	String	-	Document Title
clickMounted	全局有效，调用v-print绑定的按钮点击事件callback	Function	-	this.Object
openCallback	全局有效，调用打印时的callback	Function	-	this.Object
closeCallback	全局有效，调用关闭打印的callback(无法区分确认or取消)	Function	-	this.Object
beforeOpenCallback	全局有效，调用开始打印之前的callback	Function	-	this.Object
preview	全局有效，控制打印预览	Boolean	true/false	false
previewTitle	编辑预览页面的预览标题	String	-	‘打印预览’
previewPrintBtnLabel	编辑预览页面的打印按钮文本	String	-	‘打印’
previewBeforeOpenCallback	调用打开预览页面之前的callback	Function	-	this.Object
previewOpenCallback	调用打开预览页面之后的callback	Function	-	this.Object
url	非局部打印有效，打印指定的URL，确保同源策略相同	String	-	-
asyncUrl	非局部打印有效，异步加载打印指定的URL，确保同源策略相同	Function	-	-
zIndex	预览有效，预览窗口的z-index，默认是20002，最好比默认值更高	String，Number	-	20002

兼容低版本浏览器

原因：在printarea.js文件中print(iframe)方法中在iframe加载完，就执行iframewin.print()打印。在高版本的浏览器中在执行iframe.print()后等待手动操作打印窗口后在执行isRemove()等后面的方法。而低版本浏览器中iframe.print()后立马执行isRemve()等，所以打印无效，不弹出打印窗口。

我已经编译好了（免费的） : https://download.csdn/download/qq_43209807/87188267
使用方式：

在main.js引入：

import Print from '@/lib/vue-print-nb/print.umd.min'
Vue.use(Print)

/*打印配置*/
/*解决打印时不显示背景图片*/
#tablePrint {
  -webkit-print-color-adjust: exact;
  margin: 0 auto;
}

@page {
  /* 打印A4大小 */
  size: auto A4 landscape;
  margin: 15mm;
}

// 调整打印式样
@media print {
 .apply-table {
    padding: 0;
    font-size: 13px;
    /*width: 100% !important;*/
  }
}

本文标签： 浏览器版本功能vuePrint