第一步 安装打印插件

npm install vue-print-nb --save

第二步 在main.js中进行引入

import Print from 'vue-print-nb'
Vue.use(Print); //注册

 第三步 给需要打印的区域添加id,打印按钮为按钮添加 v-print 属性,属性的值就是’id名’

   <el-button type="primary" class="elbutton" v-print="print" 
          >打印</el-button
        >
    <div class="symContainer" id="printArea">
      <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
      </ul>
  </div>


 data() {
    return {
      print: {
        id: "printArea", //打印的区域的id名
        popTitle: "数据交互平台", // 打印配置页上方标题
        extraHead: "", //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔
        extraCss: "",
      },
   }
   }


//添加独立style标签
<style media="print" lang="scss">
@page {
  size: auto;
 
}
@media print {
  html {
    zoom: 76%; //设置打印页面的缩放,大小
     margin: 0 auto;
  }
}
</style>

 zoom: 76%; //设置打印页面的缩放,大小

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐