使用vue-print.js远程打印功能

Life a dream

已于 2022-08-23 13:50:47 修改

阅读量922

点赞数

分类专栏：笔记文章标签： javascript vue.js 前端

于 2022-07-13 11:57:13 首次发布

本文链接：https://blog.csdn.net/Li8L9xF/article/details/125760581

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

安装print-js

npm install print-js --save

main挂载

import Print from 'vue-printjs'

Vue.use(Print)

使用需要打印的id页面

  this.$print(this.$refs.child, {
        type: "html",
        header: "打印标题",
        targetStyles: ["*"], // 打印内容使用所有HTML样式，没有设置这个属性/值，设置分页打印没有效果
      });

css

@media print {
  .el-table thead {
    background: rgb(102, 102, 102);
    color: #909399;
    font-weight: 500;
  }
  @page {
    margin: 1.5cm;
    size: A4;
  }

  html {
    height: auto !important;
  }

  html,
  body {
    background-color: white;
  }

  body {
    font: 14pt "宋体", Georgia, "Times New Roman", Times, serif;
    line-height: 1;
    background: #fff !important;
    color: #000;
  }
}