@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/views/ExcelPreviewPage.vue

@@ -0,0 +1,590 @@
+<template>
+  <div class="container" ref="container">
+    <div class="report-header">
+      <div class="report-title">
+        <i class="report-back el-icon-arrow-left" @click="backPage"></i>
+        <span class="report-name">{{ $query.name || $component.title || '报表预览'}}</span>
+      </div>
+      <div class="report-operate">
+        <template v-if="$isMobile">
+          <el-dropdown>
+            <span>
+             <i class="el-icon-more" style="font-size: 18px"></i>
+            </span>
+            <template v-slot:dropdown><el-dropdown-menu>
+              <el-dropdown-item @click="downloadPdf" v-if="showOperates.includes('downloadPdf') && pdfUrl">下载pdf</el-dropdown-item>
+              <el-dropdown-item @click="downloadWord" v-if="showOperates.includes('downloadWord')">下载Word</el-dropdown-item>
+              <el-dropdown-item @click="exportExcel" v-if="reportInfo.TYPE==='excelReport' && showOperates.includes('downloadExcel')">下载excel</el-dropdown-item>
+              <el-dropdown-item @click="print" v-if="showOperates.includes('print')">打印</el-dropdown-item>
+            </el-dropdown-menu></template>
+          </el-dropdown>
+        </template>
+        <template v-else>
+          <el-button type="primary" @click="downloadPdf"  v-loading="donwloadPdfLoading" v-if="showOperates.includes('downloadPdf') && pdfUrl">下载pdf</el-button>
+          <el-button type="primary" @click="downloadWord" v-loading="donwloadWordLoading" v-if="showOperates.includes('downloadWord')">下载Word</el-button>
+          <el-button type="primary" v-if="reportInfo.TYPE==='excelReport' && showOperates.includes('downloadExcel')" v-loading="donwloadExcelLoading" @click="exportExcel">下载excel</el-button>
+          <el-button type="primary" @click="print" v-loading="printLoading" v-if="showOperates.includes('print')">打印</el-button>
+        </template>
+      </div>
+    </div>
+      <div class="report-body" v-loading="loading" @contextmenu="closeContentMenu">
+        <!-- 加载 -->
+        <div v-if="reportInfo.TYPE==='excelReport'" :class="{'mobile-content':$isMobile}" v-html="reportHtml"></div>
+        <canvas v-else v-for="page in numPages" :ref="'canvas' + page" :key="page"></canvas>
+      </div>
+      <!-- 只有能内联渲染 PDF 的浏览器才提前载入，点打印可以立刻出打印对话框；
+           微信内置浏览器载入即弹下载框，所以留空，由 guidePrint 引导 -->
+      <iframe v-if="showOperates.includes('print')" :style="{position: 'absolute', top: 0, left:0 , opacity: 0, zIndex: -1}" ref="iframe" :src="printUrl || null"></iframe>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-undef */
+import component from '@epxing/core/src/mixins/component'
+// import docxPlugin from ''
+
+export default {
+  name: 'epx-excel-preview-page',
+  mixins: [component],
+  navConfigs: {
+    flag: false
+  },
+  // 打印 HTML 时把 PDF 页渲染成图片的倍率，越大越清晰也越慢
+  printScale: 3,
+  // 浏览器打不开 PDF 时，是否改用 HTML / 图片打印。
+  // 默认关：excel 报表走 HTML，版式可能与服务端 PDF 有出入
+  htmlPrintFlag: false,
+  printGuideText: '当前浏览器不支持按原版式打印。可点右上角「⋯」选择「在浏览器中打开」后再打印，或下载 PDF 后自行打印。',
+  data () {
+    return {
+      reportInfo: {},
+      reportHtml: '',
+      reportStyle: '',
+      pdfUrl: '',
+      pdfName: '',
+      printUrl: '',
+      numPages: [],
+      loading: true,
+      printLoading: false,
+      donwloadPdfLoading: false,
+      downloadWordLoading: false,
+      donwloadExcelLoading: false
+    }
+  },
+  computed: {
+    showOperates () {
+      const { printOperates, downloadPdfFlag = true, downloadWordFlag = true, downloadExcelFlag = true, printFlag = true } = this.$query
+      if (printOperates) {
+        return printOperates
+      } else {
+        const operates = []
+        if (downloadPdfFlag) operates.push('downloadPdf')
+        if (downloadWordFlag) operates.push('downloadWord')
+        if (downloadExcelFlag) operates.push('downloadExcel')
+        if (printFlag) operates.push('print')
+        return operates
+      }
+    }
+  },
+  watch: {
+    // PDF 一到手就把打印 iframe 载好，点打印能立刻弹出打印对话框。
+    // 只对能内联渲染 PDF 的浏览器这么做——微信内置浏览器一载入就会弹下载框
+    pdfUrl (url) {
+      if (!url || !this.canPrintInFrame()) return
+      if (!this.showOperates.includes('print')) return
+      this.loadPrintFrame().catch(() => {})
+    }
+  },
+  methods: {
+    getReportInfo () {
+      const { code = this.$query.code } = this.$configs
+      this.loading = true
+      this.$http.find({
+        entityId: 'FM_FORM',
+        'scope.CODE': code
+      })
+        .then(data => {
+          this.reportInfo = data.data
+          if (data.data.TYPE === 'excelReport') {
+            this.previewExcel()
+          } else if (data.data.TYPE === 'wordReport') {
+            this.previewWord()
+          } else {
+            this.previewForm()
+          }
+          if (this.showOperates.includes('print') || this.showOperates.includes('downloadPdf')) {
+            this.exportPdf()
+          }
+        })
+        .catch(err => {
+          this.loading = false
+          this.$message.error(err.message)
+        })
+    },
+    loadEditor () {
+      return Promise.all([import(/* webpackChunkName: "canvas-editor" */'@hufe921/canvas-editor'), import(/* webpackChunkName: "canvas-editor-plugin-docx" */'@hufe921/canvas-editor-plugin-docx')])
+        .then(([CanvasEditor, docxPluginModule]) => {
+          this.CanvasEditor = CanvasEditor
+          const Editor = CanvasEditor.Editor
+          const EditorMode = CanvasEditor.EditorMode
+          const docxPlugin = docxPluginModule.default
+          return { Editor, EditorMode, docxPlugin }
+        })
+    },
+    previewExcel () {
+      const { params: queryParams = {} } = this.$query
+      const { params = {} } = this.$configs
+      const { code = this.$query.code } = this.$configs
+      const _params = this.$formatParams(params)
+      this.$http.save({
+        action: 'preview',
+        entityId: 'FM_FORM',
+        code,
+        id: this.$query.id,
+        ...queryParams,
+        ..._params
+      })
+        .then(data => {
+          this.reportHtml = data.content
+          // 留一份给打印用：打印 iframe 是独立文档，拿不到主文档 head 里的这段样式
+          this.reportStyle = data.style || ''
+          const head = document.getElementsByTagName('head')[0]
+          const style = document.createElement('style')
+          style.type = 'text/css'
+          if (style.styleSheet) {
+            style.styleSheet.cssText = data.style
+          } else {
+            style.appendChild(document.createTextNode(data.style))
+          }
+          head.appendChild(style)
+          this.loading = false
+        })
+        .catch(err => {
+          this.loading = false
+          this.$message.error(err.message)
+        })
+    },
+    previewWord () {
+      const { params: queryParams = {} } = this.$query
+      const { params = {} } = this.$configs
+      const _params = this.$formatParams(params, this.formData)
+      const { code = this.$query.code } = this.$configs
+      this.$http.save({
+        action: 'transferWord',
+        entityId: 'FM_FORM',
+        code,
+        id: this.$query.id,
+        ...queryParams,
+        ..._params
+      })
+        .then(async data => {
+          const { data: editorData = { header: [], main: [], footer: [] }, options = {} } = data ? JSON.parse(data) : {}
+          editorData.main.forEach(item => {
+
+          })
+          for (const item of editorData.main) {
+            if (item.extension && item.value && (item.extension.fieldType === 'photo' || item.extension.fieldType === 'signature')) {
+              item.type = 'image'
+              const { data: base64, width, height } = await this.$util.urlToBase64(this.$util.getFileUrl(item.value))
+              item.value = base64
+              item.width = item.extension.imageWidth || width
+              item.height = item.extension.imageHeight || height
+            }
+          }
+          const printEditorElement = document.createElement('div')
+          this.loadEditor(async ({ Editor, EditorMode, docxPlugin }) => {
+            this.printEditor = new Editor(printEditorElement, {
+              mode: EditorMode.PRINT,
+              ...editorData
+            }, options)
+            this.printEditor.use(docxPlugin)
+            // , paperDirection, width, height
+            const { printPixelRatio, width, height } = options
+            const base64List = await this.printEditor.command.getImage({
+              pixelRatio: printPixelRatio,
+              mode: EditorMode.PRINT
+            })
+            const { jsPDF } = await import('jspdf')
+            // eslint-disable-next-line new-cap
+            const doc = new jsPDF({
+              unit: 'px',
+              format: [width, height]
+            })
+            base64List.map((base64, index) => {
+              doc.addImage(base64, 'PNG', 0, index, width, height)
+              if (index !== base64List.length - 1) {
+                doc.addPage()
+              }
+            })
+            const url = doc.output('bloburi')
+            this.pdfDoc = doc
+            this.pdfUrl = url
+            this.$util.usePlugin('pdf')
+              .then(pdf => {
+                this.pdfjs = pdf
+                this.pdfjs.getDocument({
+                  url: url,
+                  cMapUrl: '/cmaps/',
+                  cMapPacked: true
+                }).promise.then((pdf) => {
+                  this.pdfDoc = pdf
+                  this.numPages = this.pdfDoc.numPages
+                  this.$nextTick(() => {
+                    this.loading = false
+                    this.renderPage(1)
+                  })
+                })
+              })
+          })
+        })
+        .catch(err => {
+          this.loading = false
+          this.$message.error(err.message)
+        })
+    },
+    previewForm () {
+      const { params: queryParams = {} } = this.$query
+      const { params = {} } = this.$configs
+      const _params = this.$formatParams(params)
+      const { code = this.$query.code } = this.$configs
+      this.$http.save({
+        action: 'exportPdf',
+        entityId: 'FM_FORM',
+        code,
+        id: this.$query.id,
+        ...queryParams,
+        ..._params
+      }, {
+        responseType: 'blob'
+      })
+        .then(({ blob, filename }) => {
+          const that = this
+          const url = window.URL.createObjectURL(blob)
+          this.$util.usePlugin('pdf')
+            .then(pdf => {
+              this.pdfjs = pdf
+              this.pdfjs.getDocument({
+                url: url,
+                cMapUrl: '/cmaps/',
+                cMapPacked: true
+              }).promise.then((pdf) => {
+                this.pdfDoc = pdf
+                this.numPages = this.pdfDoc.numPages
+                that.$nextTick(() => {
+                  that.loading = false
+                  that.renderPage(1)
+                })
+              })
+            })
+          this.loading = false
+        })
+        .catch(err => {
+          this.loading = false
+          this.$message.error(err.message)
+        })
+    },
+    renderPage (num) {
+      this.pdfDoc.getPage(num)
+        .then((page) => {
+          const canvas = this.$refs['canvas' + num][0]
+          // const canvas = document.getElementById('canvas' + num)
+          let scale = 1
+          const ctx = canvas.getContext('2d')
+          const initViewport = page.getViewport({ scale: 1 })
+          scale = Math.ceil(this.$refs.container.offsetWidth / initViewport.width)
+          const viewport = page.getViewport({ scale: scale })
+          const viewportElem = document.querySelector('meta[name=viewport]')
+          viewportElem.setAttribute('content', 'width=device-width')
+          canvas.width = viewport.width // 画布大小,默认值是width:300px,height:150px
+          canvas.height = viewport.height
+          canvas.style.width = '100%' // 画布的框架大小
+          const renderContext = {
+            canvasContext: ctx,
+            viewport: viewport
+          }
+          page.render(renderContext)
+          if (this.numPages > num) {
+            this.renderPage(num + 1)
+          }
+        })
+    },
+    closeContentMenu (event) {
+      event.preventDefault()
+      return false
+    },
+    exportExcel () {
+      const { params: queryParams = {} } = this.$query
+      const { params = {} } = this.$configs
+      const _params = this.$formatParams(params)
+      const { code = this.$query.code } = this.$configs
+      this.downloadExcelLoading = true
+      this.$http.save({
+        action: 'exportExcel',
+        entityId: 'FM_FORM',
+        code,
+        id: this.$query.id,
+        ...queryParams,
+        ..._params
+      }, {
+        responseType: 'blob'
+      })
+        .then(({ blob, filename }) => {
+          var a = document.createElement('a')
+          document.body.appendChild(a)
+          const objectUrl = URL.createObjectURL(blob)
+          a.href = objectUrl
+          a.download = filename
+          a.click()
+          window.URL.revokeObjectURL(objectUrl)
+          document.body.removeChild(a)
+          this.downloadExcelLoading = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          this.downloadExcelLoading = false
+        })
+    },
+    exportPdf () {
+      if (this.reportInfo.TYPE === 'wordReport') return Promise.resolve()
+      const { params: queryParams = {} } = this.$query
+      const { params = {} } = this.$configs
+      const _params = this.$formatParams(params)
+      const { code = this.$query.code } = this.$configs
+      return this.$http.save({
+        action: 'exportPdf',
+        entityId: 'FM_FORM',
+        code,
+        id: this.$query.id,
+        ...queryParams,
+        ..._params
+      }, {
+        responseType: 'blob'
+      })
+        .then(({ blob, filename }) => {
+          const url = window.URL.createObjectURL(blob)
+          this.pdfUrl = url
+          this.pdfName = filename
+          // window.open(url)
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    print () {
+      if (this.printLoading) return Promise.resolve()
+      this.printLoading = true
+      return this.ensurePdf()
+        .then(() => {
+          // 浏览器自带 PDF 阅读器：直接打印那份 PDF，矢量最保真
+          if (this.canPrintInFrame() && this.pdfUrl) {
+            return this.loadPrintFrame()
+              .then(() => {
+                this.$refs.iframe.contentWindow.print()
+                return true
+              })
+          }
+          // 打不开 PDF 的浏览器（微信内置浏览器等）：配置允许时才用 HTML / 图片打印。
+          // 默认不用——excel 报表打的是 HTML，版式可能和服务端 PDF 对不齐
+          const { htmlPrintFlag = this.$options.htmlPrintFlag } = this.$configs
+          if (htmlPrintFlag && !this.$isMobile) return this.printAsHtml()
+          return false
+        })
+        .then(printed => {
+          if (printed) return
+          return this.guidePrint()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+        .finally(() => {
+          this.printLoading = false
+        })
+    },
+    // 能不能走隐藏 iframe 打印那份 PDF：取决于浏览器是否内置 PDF 渲染
+    canPrintInFrame () {
+      return !this.$isMobile && this.$util.canPreviewPdfInline()
+    },
+    // 浏览器打不了这份 PDF 时的引导：去系统浏览器打印（版式与预览完全一致），
+    // 或者下载下来自己打印。微信内置浏览器右上角「⋯」就有「在浏览器中打开」
+    guidePrint () {
+      if (!this.pdfUrl) throw new Error('打印文件尚未生成，请稍后重试')
+      const guideText = this.$configs.printGuideText || this.$options.printGuideText
+      return this.$confirm(guideText, '打印', {
+        confirmButtonText: '下载 PDF',
+        cancelButtonText: '知道了',
+        type: 'warning'
+      })
+        .then(() => {
+          this.openPdfFile()
+        })
+        .catch(() => {})
+    },
+    // 打印纯 HTML，返回是否真的打印了（浏览器没有打印栈时为 false）
+    printAsHtml () {
+      return this.buildPrintHtml()
+        .then(html => html ? this.$util.printHtml(html) : false)
+    },
+    // 组装打印文档：excel 报表本来就是 HTML，其余类型用 pdf.js 把每页画成图片
+    buildPrintHtml () {
+      const { printScale = this.$options.printScale } = this.$configs
+      const title = this.reportInfo.NAME || this.$component.title || '报表'
+      const head = '<meta charset="utf-8"><title>' + title + '</title>' +
+        '<style>@page{margin:8mm}body{margin:0}' +
+        'img{display:block;width:100%;page-break-after:always}' +
+        'img:last-of-type{page-break-after:auto}</style>'
+      if (this.reportInfo.TYPE === 'excelReport') {
+        if (!this.reportHtml) return Promise.resolve('')
+        return Promise.resolve('<!doctype html><html><head>' + head +
+          '<style>' + this.reportStyle + '</style></head><body>' + this.reportHtml + '</body></html>')
+      }
+      return this.$util.pdfDocToImages(this.pdfDoc, printScale)
+        .then(images => {
+          if (!images.length) return ''
+          const body = images.map(src => '<img src="' + src + '">').join('')
+          return '<!doctype html><html><head>' + head + '</head><body>' + body + '</body></html>'
+        })
+    },
+    // 打印用的 PDF 预览时已预取，这里只做兜底补取
+    ensurePdf () {
+      if (this.pdfUrl) return Promise.resolve()
+      // word 报表的 pdfUrl 由 previewWord 生成，不重复导出
+      if (this.reportInfo.TYPE === 'wordReport') return Promise.resolve()
+      this.pdfPromise = this.pdfPromise || this.exportPdf()
+      return this.pdfPromise
+    },
+    // 把 PDF 交给隐藏 iframe 并等它真正加载完。
+    // 同一份文件只加载一次，预载和点击打印共用同一个 Promise
+    loadPrintFrame () {
+      if (this.printFrameUrl === this.pdfUrl && this.printFramePromise) return this.printFramePromise
+      const iframe = this.$refs.iframe
+      if (!iframe) return Promise.reject(new Error('打印组件未就绪'))
+      this.printFrameUrl = this.pdfUrl
+      const loading = new Promise((resolve, reject) => {
+        let timer = null
+        const onLoad = () => {
+          clearTimeout(timer)
+          iframe.removeEventListener('load', onLoad)
+          resolve()
+        }
+        const load = () => {
+          iframe.addEventListener('load', onLoad)
+          timer = setTimeout(() => {
+            iframe.removeEventListener('load', onLoad)
+            reject(new Error('打印文件加载超时，请重试'))
+          }, 30000)
+          this.printUrl = this.pdfUrl
+        }
+        if (this.printUrl === this.pdfUrl) {
+          // 同一个地址重新加载：先清空 src，下一帧再赋值，否则收不到 load 事件
+          this.printUrl = ''
+          this.$nextTick(load)
+        } else {
+          load()
+        }
+      })
+      // 加载失败就把缓存清掉，下次点打印还能重试
+      this.printFramePromise = loading.catch(err => {
+        this.printFrameUrl = ''
+        this.printFramePromise = null
+        throw err
+      })
+      return this.printFramePromise
+    },
+    openPdfFile () {
+      const a = document.createElement('a')
+      document.body.appendChild(a)
+      a.href = this.pdfUrl
+      a.download = this.pdfName || this.reportInfo.NAME
+      a.click()
+      document.body.removeChild(a)
+    },
+    downloadPdf () {
+      this.openPdfFile()
+    },
+    downloadWord () {
+      this.downloadWordLoading = true
+      if (this.reportInfo.TYPE === 'wordReport') {
+        this.printEditor.command.executeExportDocx({
+          filename: this.reportInfo.NAME
+        })
+        this.downloadWordLoading = false
+      } else {
+        const { params: queryParams = {} } = this.$query
+        const { params = {} } = this.$configs
+        const _params = this.$formatParams(params)
+        const { code = this.$query.code } = this.$configs
+        this.$http.save({
+          action: 'exportWord',
+          entityId: 'FM_FORM',
+          code,
+          id: this.$query.id,
+          ...queryParams,
+          ..._params
+        }, {
+          responseType: 'blob'
+        })
+          .then(({ blob, filename }) => {
+            var a = document.createElement('a')
+            document.body.appendChild(a)
+            const objectUrl = URL.createObjectURL(blob)
+            a.href = objectUrl
+            a.download = filename
+            a.click()
+            window.URL.revokeObjectURL(objectUrl)
+            document.body.removeChild(a)
+            this.downloadWordLoading = false
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+            this.downloadWordLoading = false
+          })
+      }
+    }
+  },
+  mounted () {
+  },
+  created () {
+    this.getReportInfo()
+
+    // this.$store.commit('SWITCH_MENU_SHOW', false)
+    // this.$store.commit('SWITCH_APP_NAV_SHOW', false)
+  },
+  beforeUnmount () {
+    // this.$store.commit('SWITCH_MENU_SHOW', true)
+    // this.$store.commit('SWITCH_APP_NAV_SHOW', true)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+.report-header {
+  height: 56px;
+  background: var(--epx-bg-card);
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--epx-border);
+}
+.report-body {
+  height: calc(100% - 58px);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  background: var(--epx-bg-card);
+  overflow: auto;
+}
+.report-back {
+  font-size: var(--epx-font-size-xl);
+  cursor: pointer;
+  position: relative;
+  top: 1px;
+}
+.mobile-content :deep(table){
+  width: 100% !important;
+}
+</style>

package/src/views/ExportFilePage.vue

@@ -0,0 +1,19 @@
+<script>
+import BasePageVue from '@epxing/components/src/base-page/BasePage.vue'
+export default {
+  name: 'epx-export-file-page',
+  extends: BasePageVue,
+  items: [
+    {
+      id: 'nav',
+      title: '导航',
+      contentType: 'header'
+    },
+    {
+      id: 'export',
+      title: '导出',
+      contentType: 'export-file'
+    }
+  ]
+}
+</script>

package/src/views/ExportPage.vue

@@ -0,0 +1,19 @@
+<script>
+import BasePageVue from '@epxing/components/src/base-page/BasePage.vue'
+export default {
+  name: 'epx-export-page',
+  extends: BasePageVue,
+  items: [
+    {
+      id: 'nav',
+      title: '导航',
+      contentType: 'header'
+    },
+    {
+      id: 'export',
+      title: '导出',
+      contentType: 'export'
+    }
+  ]
+}
+</script>