vue 打印 vue-print-nb

自定义指令 v-trigger 打开后直接点击 触发打印

print: {
          id: 'printBox',
          // 关闭打印的callback(无法区分确认or取消)
					closeCallback(vue) {
            vue.flag = false
          },

print 的设置 可以去官网看具体的配置

// 设置打印样式,打开打印预览页面
export function handlePrint(flag,type){
  nextTick(()=>{
    let temp = document.querySelectorAll('.printStyle')
    temp.forEach((item)=>{
      item.remove()
    })
    let style = document.createElement('style');
    style.className = 'printStyle';
    style.innerHTML = `
      @media print {
        @page {
          size: ` + type +`;
          margin: 0;
        }
        .hide {
          display: block !important;
        }
        .nextpage {
          page-break-after:always;
        }
      }
    `;
    document.head.appendChild(style);
    flag.value = true
  })
}

你可能感兴趣的:(vue.js,前端,javascript)