|
|
|
@ -1,6 +1,11 @@ |
|
|
|
<template> |
|
|
|
<div class="box"> |
|
|
|
<div class="top-container"> |
|
|
|
<div class="preview-wrapper"> |
|
|
|
<!-- border-bottom: 1px solid #edeff3; --> |
|
|
|
<div class="collect-header" style="justify-content: flex-start; border-top: none; "> |
|
|
|
<h4 class="is-file" style="flex:none; width: 120px;">原文</h4> |
|
|
|
<span style="font-size: 12px; flex: 1; line-height: 42px;">所属文件：{{ parentArchiveNo }}</span> |
|
|
|
</div> |
|
|
|
<!-- <div class="top-container"> |
|
|
|
<div class="top-left"> |
|
|
|
<input |
|
|
|
class="file-select" |
|
|
|
@ -18,21 +23,32 @@ |
|
|
|
<el-button v-print="printObj">vue-print打印</el-button> |
|
|
|
<el-button type="primary" @click="toImg">转图片打印</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div class="main-content"> |
|
|
|
<div class="content-list">原文列表</div> |
|
|
|
<div class="content-list"> |
|
|
|
<h4 class="arc-title">原文列表</h4> |
|
|
|
<ul v-if="allFileTables.length!==0" class="file-list"> |
|
|
|
<li v-for="(item,index) in allFileTables" :key="index"> |
|
|
|
<span>{{ item.file_name }}</span> |
|
|
|
<i class="iconfont icon-attachment" /> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<el-empty v-else :image-size="100" /> |
|
|
|
</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" /> |
|
|
|
<!-- <vue-office-docx src="http://192.168.99.67:11100/downloadFile/category/AE8B188F0C0314F9BE31B8/82FBCAE96CBC9F50809838/bc3e5591-d600-4121-a977-83d9e06696cb.docx" style="height: 100%; margin: 0; padding: 0" /> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
// http://192.168.99.67:11100/downloadFile/category/0E02F5F5244F99BAD237ED/7139F9C7A268FDA705C7B7/4704A9AF804943CA71A4A4/96A2FA10D76B60DEF43066.png |
|
|
|
|
|
|
|
import { getExtend, readBuffer, render } from '@/components/util' |
|
|
|
import { parse } from 'qs' |
|
|
|
// import { timeFormate } from '@/utils/index' |
|
|
|
@ -40,9 +56,12 @@ import { watermark } from '@/utils/waterMark' |
|
|
|
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js |
|
|
|
import printJS from 'print-js' |
|
|
|
|
|
|
|
// import VueOfficeDocx from '@vue-office/docx' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Preview', |
|
|
|
components: { |
|
|
|
// VueOfficeDocx |
|
|
|
}, |
|
|
|
props: { |
|
|
|
msg: { |
|
|
|
@ -84,7 +103,9 @@ export default { |
|
|
|
extarCss: '' |
|
|
|
}, |
|
|
|
watermarkInfo: null, |
|
|
|
timer: null |
|
|
|
timer: null, |
|
|
|
parentArchiveNo: null, |
|
|
|
allFileTables: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@ -102,6 +123,14 @@ export default { |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
if (this.$route.query.archiveNo) { |
|
|
|
this.parentArchiveNo = this.$route.query.archiveNo |
|
|
|
} |
|
|
|
if (localStorage.getItem('fileTables')) { |
|
|
|
this.allFileTables = JSON.parse(localStorage.getItem('fileTables')) |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
toImg() { // 转图片打印 |
|
|
|
html2canvas(this.$refs.output, { |
|
|
|
@ -125,7 +154,6 @@ export default { |
|
|
|
try { |
|
|
|
clearTimeout(this.timer) |
|
|
|
const [file] = e.target.files |
|
|
|
|
|
|
|
const fileReader = new FileReader() |
|
|
|
fileReader.readAsArrayBuffer(file) |
|
|
|
console.log('fileReader', fileReader) |
|
|
|
@ -133,7 +161,6 @@ export default { |
|
|
|
this.src = fileReader.result |
|
|
|
console.log('fileReader22', fileReader.result) |
|
|
|
} |
|
|
|
|
|
|
|
const arrayBuffer = await readBuffer(file) |
|
|
|
|
|
|
|
this.last = await this.displayResult(arrayBuffer, file) |
|
|
|
@ -245,6 +272,13 @@ export default { |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.preview-wrapper{ |
|
|
|
background-color: #f6f8fc; |
|
|
|
.collect-header{ |
|
|
|
background-color: #fff; |
|
|
|
border-bottom: 1px solid #edeff3; |
|
|
|
} |
|
|
|
} |
|
|
|
.top-container{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
@ -278,18 +312,48 @@ export default { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
width: calc(100%); |
|
|
|
height: calc(100vh - 51px); |
|
|
|
border-top: 1px solid #ccc; |
|
|
|
height: calc(100vh - 75px); |
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
.content-list{ |
|
|
|
width: 300px; |
|
|
|
padding: 10px; |
|
|
|
.arc-title{ |
|
|
|
height: 48px; |
|
|
|
line-height: 48px; |
|
|
|
text-align: center; |
|
|
|
font-size: 16px; |
|
|
|
color: #0c0e1e; |
|
|
|
background-color: #f3f5f8; |
|
|
|
} |
|
|
|
.file-list{ |
|
|
|
height: calc(100% - 48px); |
|
|
|
padding: 10px 0; |
|
|
|
font-size: 14px; |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: scroll; |
|
|
|
li{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 10px 0 20px; |
|
|
|
line-height: 34px; |
|
|
|
cursor:default; |
|
|
|
& span{ |
|
|
|
display: block; |
|
|
|
margin-right: 4px; |
|
|
|
} |
|
|
|
&:hover{ |
|
|
|
background-color: #e8f2ff; |
|
|
|
color: #0c0e1e; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.content-right{ |
|
|
|
position: relative; |
|
|
|
flex: 1; |
|
|
|
height: calc(100vh - 52px); |
|
|
|
background: #f2f2f2; |
|
|
|
border: 1px solid #ccc; |
|
|
|
height: calc(100vh - 75px); |
|
|
|
background-color: #f6f8fc; |
|
|
|
border: 1px solid #edeff3; |
|
|
|
border-top: none; |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
|
