记一次打印功能

敲什么代码

已于 2023-03-28 09:54:03 修改

阅读量77

点赞数

文章标签： vue.js 前端 javascript Powered by 金山文档

于 2023-03-21 09:52:30 首次发布

本文链接：https://blog.csdn.net/yigeboke/article/details/129681513

版权

该文介绍了如何在Vue项目中安装和使用vue-print-nb插件进行打印操作。通过在main.js中注册插件，然后在HTML中添加按钮触发打印，结合JS方法和CSS样式控制，实现了一个包含表格的报表打印功能。然而，由于分辨率限制，可能出现纵向展示不全的问题，需对表格列宽做固定处理。

摘要由CSDN通过智能技术生成

安装 vue-print-nb

npm install vue-print-nb

注册插件(main.js)

// 打印插件
import Print from './print'
Vue.use(Print)

代码(html)

<el-button size="medium" type="success" v-print="printObj" 
@click="getPrint" >打印</el-button>

<div id="printMe">
      <h3 style="text-align: center; font-weight: bolder; font-size: 20px">
        这是个报表
      </h3>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="OrgName" label="单位" width="150">
        </el-table-column>
        <el-table-column
          prop="UserRealName"
          label="姓名"
          width="100"
        ></el-table-column>
        <el-table-column prop="WeekCount" label="周完成量" width="150">
        </el-table-column>
        <el-table-column prop="WeekExpectCount" label="周任务量" width="100">
        </el-table-column>
        <el-table-column prop="MonthCount" label="月完成量" width="150">
        </el-table-column>
        <el-table-column prop="MonthExpectCount" label="月任务量" width="100">
        </el-table-column>
        <el-table-column prop="QuarterCount" label="季度完成量" width="150">
        </el-table-column>
        <el-table-column
          prop="QuarterExpectCount"
          label="季度任务量"
          width="150"
        >
        </el-table-column>
      </el-table>
</div>

代码(js)

data(){
 return{
  tableData: [],
  printObj: {
    id: "printMe",//要打印的盒子id名
    popTitle: "走访统计报表",//打印的标题,字体会有点小
    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',//这个不知道啥用
  },
 }
},
methods:{
  getPrint() {
     window.print;//调用浏览器打印方法儿
  },
}

css

<style type="text/css" media="print">
 @page {
  /* 浏览器打印预览界面横向布局 */
  size: landscape;
  /* 去掉页眉页脚,因为自带的标题字体太小,没找到调整的方法儿 */
  margin-top: 0;
  margin-bottom: 0;
 }
</style>

注意:我用的这个会有一个问题,纵向展示不全,1920分辨率下纵向也不全,所以需要每一列都要固定宽度,