yxk-electronic-archives/src/views/preview/index.vue

<template>
  <div class="box">
    <div class="top-container">
      <div class="top-left">
        <input
          class="file-select"
          type="file"
          @change="handleChange"
        >
      </div>
      <div class="top-middle">
        文件预览
      </div>
      <div class="top-right">
        <el-button @click="printWindow">
          <i class="el-icon-printer" />window
        </el-button>
        <el-button v-print="printObj">vue-print打印</el-button>
        <el-button type="primary" @click="toImg">转图片打印</el-button>
      </div>
    </div>
    <div class="main-content">
      <div class="content-list">原文列表</div>
      <div v-loading="loading" class="content-right">
        <!-- <div v-show="loading" class="well loading">
          正在加载中，请耐心等待...
        </div> -->
        <div id="printArea" ref="output" class="well-box" />
        <div class="water-mask" />
      </div>
    </div>
  </div>
</template>

<script>
import { getExtend, readBuffer, render } from '@/components/util'
import { parse } from 'qs'
// import { timeFormate } from '@/utils/index'
import { watermark } from '@/utils/waterMark'
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
import printJS from 'print-js'

export default {
  name: 'Preview',
  props: {
    msg: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      logo: require('../../assets/images/logo.png'),
      // 加载状态跟踪
      loading: false,
      // 上个渲染实例
      last: null,
      // 隐藏头部，当基于消息机制渲染，将隐藏
      hidden: false,
      printObj: {
        id: 'printArea',
        popTitle: '配置页眉标题', // 打印配置页上方的标题
        extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: true, // 是否启动预览模式，默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback() { console.log('正在加载预览窗口！') }, // 预览窗口打开之前的callback
        previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
        beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
        openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
        closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() { console.log('点击v-print绑定的按钮了！') },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      },
      watermarkInfo: null,
      timer: null
    }
  },
  created() {
    // 允许使用预留的消息机制发送二进制数据，必须在url后添加?name=xxx.xxx&from=xxx
    const { from, name } = parse(location.search.substr(1))
    if (from) {
      window.addEventListener('message', (event) => {
        const { origin, data: blob } = event
        if (origin === from && blob instanceof Blob) {
          // 构造响应，自动渲染
          const file = new File([blob], name, {})
          this.hidden = true
          this.handleChange({ target: { files: [file] }})
        }
      })
    }
  },
  methods: {
    toImg() { // 转图片打印
      html2canvas(this.$refs.output, {
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight
      }).then((canvas) => {
        // let url = canvas.toDataURL('image/jpeg', 1.0)
        const url = canvas.toDataURL()
        this.img = url
        printJS({
          printable: url,
          type: 'image',
          documentTitle: '打印图片'
        })
        console.log(url)
      })
    },
    async handleChange(e) {
      this.loading = true
      try {
        clearTimeout(this.timer)
        const [file] = e.target.files
        const arrayBuffer = await readBuffer(file)

        this.last = await this.displayResult(arrayBuffer, file)
        this.$nextTick(() => {
          // 取得扩展名
          const extend = getExtend(file.name)
          // 加水印
          const maskDiv = document.getElementsByClassName('mask_div')
          const imgMaskDiv = document.getElementsByClassName('weterbox')

          if (imgMaskDiv.length === 1) {
            document.getElementsByClassName('water-mask')[0].removeChild(imgMaskDiv[0])
          }
          // docx-wrapper docx
          for (var j = maskDiv.length - 1; j >= 0; j--) {
            document.getElementsByClassName('water-mask')[0].removeChild(maskDiv[j])
          }

          this.watermarkInfo = {
            'id': '9C5384EE889C0A977FC8F6',
            'watermarkType': '0',
            'watermarkFont': '16',
            'transparency': 'rgba(255, 69, 0, 0.45)',
            'context': '安全水印',
            'isEnable': true
          }

          if (!extend.includes('pdf')) {
            // watermark({ watermark_txt: '徐华姣' + timeFormate() }, 'water-mask', 'text')
            // watermark({ watermark_txt: this.logo }, 'water-mask', 'img')
            watermark({
              watermark_txt: this.watermarkInfo.context,
              watermark_color: this.watermarkInfo.transparency,
              watermark_fontsize: this.watermarkInfo.watermarkFont + 'px'
            }, 'water-mask', 'text')
          }
        })
      } catch (e) {
        console.error(e)
      } finally {
        this.timer = setTimeout(() => {
          this.loading = false
        }, 1000)
      }
    },
    displayResult(buffer, file) {
      // 取得文件名
      const { name } = file
      // 取得扩展名
      const extend = getExtend(name)
      // 输出目的地
      const { output } = this.$refs
      // 生成新的dom
      const node = document.createElement('div')
      // 添加孩子，防止vue实例替换dom元素
      if (this.last) {
        output.removeChild(this.last.$el)
        this.last.$destroy()
      }
      const child = output.appendChild(node)
      // 调用渲染方法进行渲染
      return new Promise((resolve, reject) =>
        render(buffer, extend, child).then(resolve).catch(reject)
      )
    },
    // 打印ofd文件
    async printWindow() {
      /* if (this.showScale !== 0) {
        this.showScale = 0;
        const divs = renderOfd(this.domWidth, this.ofdObj);
        await this.displayOfdDiv(divs);
      }*/
      const childs = this.$refs.output.children
      const list = []
      for (const page of childs) {
        list.push(page.cloneNode(true))
      }
      if (list.length > 0) {
        const printWindow = window.open('打印窗口', '_blank')
        // 给新打开的标签页添加画布内容
        const documentBody = printWindow.document.body

        // 需要给新打开的标签页添加样式，否则打印出来的内容会很错位
        documentBody.style.marginTop = '20px'
        for (const page of list) {
          // 为了让打印的内容不会太靠上，所以给每一页都添加一个marginBottom
          page.style.marginBottom = '20px'
          documentBody.appendChild(page)
        }
        // 焦点移到新打开的标签页
        printWindow.focus()
        // 执行打印的方法（注意打印方法是打印的当前窗口内的元素，所以前面才新建一个窗口：print()--打印当前窗口的内容。）
        printWindow.print()
        // 操作完成之后关闭当前标签页（点击确定或者取消都会关闭）
        printWindow.close()
      }
    }
  }
}
</script>
<style>
@media print {
  @page {
    size:  auto;
  }
  body, html {
    height: auto !important;
  }
}
</style>
<style lang="scss" scoped>
.top-container{
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  text-align: center;
  align-items: center;
  color: #000;
  .top-left{
  }
  .top-middle{
    flex:1;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  .top-right{
    text-align: center;
    align-items: center;
    display:flex;
    justify-content: flex-end;
    .el-button{
      padding: 0 4px;
      height: 30px;
      line-height: 30px;
    }
  }
}

.main-content{
  display: flex;
  justify-content: space-between;
	width: calc(100%);
	height: calc(100vh - 51px);
  border-top: 1px solid #ccc;
  .content-list{
    width: 300px;
    padding: 10px;
  }
  .content-right{
    position: relative;
    flex: 1;
    height: calc(100vh - 52px);
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-top: none;
    overflow: hidden;
    overflow-y: auto;
  }
}
.well-box{
  position: relative;
}
.water-mask{
  position: fixed;
  left: 300px;
  top: 55px;
  bottom: 10px;
  right: 10px;
  width:100%;
  z-index:99;
  pointer-events: none;
}
</style>

<style>
.pptx-wrapper {
	max-width: 1000px;
	margin: 0 auto;
}
</style>