Lab 023

安装类库

npm install html2canvas --save

main.js引入类库

import html2canvas from 'html2canvas'
const MyPlugin = {
  install(Vue, options) {
    window.html2canvas = html2canvas
  }
}
Vue.use(MyPlugin)

打印区域capture

<el-dialog :title="tempValues.bTable.title" id="capture" :visible.sync="tempValues.bTable.visiable"  width="550px" height="978px" top="0vh" >
  <!-- bTable -->
  <el-table :data="tempValues.bTable.actionDataList" :cell-style="{'border': '1px dashed #ebeef5'}"  :cell-class-name="_custom_tableCellClassNamePrint" :show-header="false" :key="tempValues.bTable.tableKey" v-loading="tempValues.bTable.loading" element-loading-text="正在加载数据" border fit highlight-current-row style="background: white!important; background-color: white!important; width: 100%">
    <el-table-column header-align="center" :width="_custom_setColumnWidth(item.key)" :align="setColumnAlign(item.key)" :label="item.display_name" :key="item.key" v-for="item in visiblePrint">
      <template slot-scope="scope">
        <span style="font-size: 20px; font-weight: 400; width: 100%; height: 100%; display:block; padding: 8px 0 8px;">{{ scope.row[item.key] }}</span>
      </template>
    </el-table-column>
  </el-table>
</el-dialog>

打印方法

async print(fileName) {
  setTimeout(async function() {
    window.html2canvas(document.querySelector('#capture').firstChild).then(canvas => {
      // npm install file-saver
      canvas.toBlob(function(blob) {
        saveAs(blob, fileName + '.png')
      })
    })
  }, 2000)
}