前端js 调用浏览器打印功能

一、演示效果

超简单调用浏览器打印的方法：调用window.print() 

二、代码说明

使用的vue-quill-editor富文本编辑器给文本加了样式，vue-quill-editor富文本编辑器在前文中有提到过，感兴趣的可以查看一下

1、在代码中写一个按钮

<el-button size="mini" @click="dy">打印</el-button>

2、富文本编写的内容展示出来

element组件中弹窗功能，vue框架中的v-html

注意class样式是富文本的样式，不添加富文本的样式不显示

<el-dialog title="" :visible.sync="dyDialog" :modal-append-to-body="false" :fullscreen="true">
      <div v-html="dyHtml" class="ql-editor"></div>
    </el-dialog>

3、调用打印

dy(){
      this.dialogTableVisible = false//关闭第一个弹窗
      this.dyDialog = true//打印弹窗打开
      this.dyHtml = this.detail
      setTimeout(function() {
        window.print();//调用浏览器打印的方法
      }, 2000);//延迟2秒执行
    },