|
|
|
@ -1,6 +1,5 @@ |
|
|
|
<template> |
|
|
|
<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> |
|
|
|
@ -28,40 +27,32 @@ |
|
|
|
<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"> |
|
|
|
<li v-for="(item,index) in allFileTables" :key="index" :class="{'active-file': item.id == fileCurrent.id}" @click="selectFile(item)"> |
|
|
|
<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 v-loading="loading" element-loading-text="文件加载中" class="content-right" :style="{overflowY : !loading ? 'auto' : 'hidden'}"> |
|
|
|
<div id="printArea" ref="output" class="well-box" /> |
|
|
|
<!-- <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 class="water-mask" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
// http://192.168.99.67:11100/downloadFile/category/0E02F5F5244F99BAD237ED/7139F9C7A268FDA705C7B7/4704A9AF804943CA71A4A4/96A2FA10D76B60DEF43066.png |
|
|
|
|
|
|
|
import { FetchBase64ByFileId } from '@/api/archivesManage/library' |
|
|
|
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' |
|
|
|
|
|
|
|
// import VueOfficeDocx from '@vue-office/docx' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Preview', |
|
|
|
components: { |
|
|
|
// VueOfficeDocx |
|
|
|
}, |
|
|
|
props: { |
|
|
|
msg: { |
|
|
|
@ -105,7 +96,9 @@ export default { |
|
|
|
watermarkInfo: null, |
|
|
|
timer: null, |
|
|
|
parentArchiveNo: null, |
|
|
|
allFileTables: [] |
|
|
|
allFileTables: [], |
|
|
|
toFile: null, |
|
|
|
fileCurrent: null |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@ -130,8 +123,51 @@ export default { |
|
|
|
if (localStorage.getItem('fileTables')) { |
|
|
|
this.allFileTables = JSON.parse(localStorage.getItem('fileTables')) |
|
|
|
} |
|
|
|
|
|
|
|
if (localStorage.getItem('fileCurrent')) { |
|
|
|
this.fileCurrent = JSON.parse(localStorage.getItem('fileCurrent')) |
|
|
|
} |
|
|
|
console.log('this.fileCurrent', this.fileCurrent) |
|
|
|
this.get() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
selectFile(item) { |
|
|
|
this.fileCurrent = item |
|
|
|
this.get() |
|
|
|
}, |
|
|
|
get() { |
|
|
|
this.loading = true |
|
|
|
const params = { |
|
|
|
'fileId': this.fileCurrent ? this.fileCurrent.id : this.allFileTables[0].id |
|
|
|
} |
|
|
|
FetchBase64ByFileId(params).then(res => { |
|
|
|
console.log('fffff', res) |
|
|
|
var base64String = res |
|
|
|
var fileName = this.fileCurrent && this.fileCurrent.file_name |
|
|
|
var mimeType = this.fileCurrent && this.fileCurrent.file_type |
|
|
|
this.toFile = this.base64ToFile(base64String, fileName, mimeType) |
|
|
|
console.log(this.toFile) |
|
|
|
if (this.toFile) { |
|
|
|
this.handleChange() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
base64ToFile(base64String, fileName, mimeType) { |
|
|
|
var byteCharacters = atob(base64String) |
|
|
|
var byteArrays = [] |
|
|
|
for (var offset = 0; offset < byteCharacters.length; offset += 512) { |
|
|
|
var slice = byteCharacters.slice(offset, offset + 512) |
|
|
|
var byteNumbers = new Array(slice.length) |
|
|
|
for (var i = 0; i < slice.length; i++) { |
|
|
|
byteNumbers[i] = slice.charCodeAt(i) |
|
|
|
} |
|
|
|
var byteArray = new Uint8Array(byteNumbers) |
|
|
|
byteArrays.push(byteArray) |
|
|
|
} |
|
|
|
var file = new Blob(byteArrays, { type: mimeType }) |
|
|
|
file.name = fileName |
|
|
|
return file |
|
|
|
}, |
|
|
|
toImg() { // 转图片打印 |
|
|
|
html2canvas(this.$refs.output, { |
|
|
|
backgroundColor: null, |
|
|
|
@ -150,27 +186,30 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
async handleChange(e) { |
|
|
|
this.loading = true |
|
|
|
try { |
|
|
|
clearTimeout(this.timer) |
|
|
|
const [file] = e.target.files |
|
|
|
// const [file] = e.target.files |
|
|
|
// console.log('file', file) |
|
|
|
const fileReader = new FileReader() |
|
|
|
fileReader.readAsArrayBuffer(file) |
|
|
|
fileReader.readAsArrayBuffer(this.toFile) |
|
|
|
console.log('fileReader', fileReader) |
|
|
|
fileReader.onload = () => { |
|
|
|
this.src = fileReader.result |
|
|
|
console.log('fileReader22', fileReader.result) |
|
|
|
} |
|
|
|
const arrayBuffer = await readBuffer(file) |
|
|
|
const arrayBuffer = await readBuffer(this.toFile) |
|
|
|
|
|
|
|
this.last = await this.displayResult(arrayBuffer, file) |
|
|
|
this.last = await this.displayResult(arrayBuffer, this.toFile) |
|
|
|
this.$nextTick(() => { |
|
|
|
// 取得扩展名 |
|
|
|
const extend = getExtend(file.name) |
|
|
|
const extend = getExtend(this.toFile.name) |
|
|
|
console.log('extend', extend) |
|
|
|
// 加水印 |
|
|
|
const maskDiv = document.getElementsByClassName('mask_div') |
|
|
|
const imgMaskDiv = document.getElementsByClassName('weterbox') |
|
|
|
|
|
|
|
console.log(document.getElementById('error-tip')) |
|
|
|
|
|
|
|
if (imgMaskDiv.length === 1) { |
|
|
|
document.getElementsByClassName('water-mask')[0].removeChild(imgMaskDiv[0]) |
|
|
|
} |
|
|
|
@ -182,7 +221,7 @@ export default { |
|
|
|
this.watermarkInfo = { |
|
|
|
'id': '9C5384EE889C0A977FC8F6', |
|
|
|
'watermarkType': '0', |
|
|
|
'watermarkFont': '16', |
|
|
|
'watermarkFont': '30', |
|
|
|
'transparency': 'rgba(255, 69, 0, 0.45)', |
|
|
|
'context': '安全水印', |
|
|
|
'isEnable': true |
|
|
|
@ -197,6 +236,10 @@ export default { |
|
|
|
watermark_fontsize: this.watermarkInfo.watermarkFont + 'px' |
|
|
|
}, 'water-mask', 'text') |
|
|
|
} |
|
|
|
|
|
|
|
if (document.getElementById('error-tip')) { |
|
|
|
document.getElementsByClassName('water-mask')[0].innerHTML = '' |
|
|
|
} |
|
|
|
}) |
|
|
|
} catch (e) { |
|
|
|
console.error(e) |
|
|
|
@ -337,6 +380,10 @@ export default { |
|
|
|
padding: 0 10px 0 20px; |
|
|
|
line-height: 34px; |
|
|
|
cursor:default; |
|
|
|
&.active-file{ |
|
|
|
background-color: #e8f2ff; |
|
|
|
color: #0c0e1e; |
|
|
|
} |
|
|
|
& span{ |
|
|
|
display: block; |
|
|
|
margin-right: 4px; |
|
|
|
@ -356,7 +403,7 @@ export default { |
|
|
|
border: 1px solid #edeff3; |
|
|
|
border-top: none; |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
// overflow-y: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
.well-box{ |
|
|
|
@ -365,7 +412,7 @@ export default { |
|
|
|
.water-mask{ |
|
|
|
position: fixed; |
|
|
|
left: 300px; |
|
|
|
top: 55px; |
|
|
|
top: 100px; |
|
|
|
bottom: 10px; |
|
|
|
right: 10px; |
|
|
|
width:100%; |
|
|
|
|
