|
|
|
@ -1,34 +1,35 @@ |
|
|
|
<template> |
|
|
|
<div class="box"> |
|
|
|
<div class="banner"> |
|
|
|
<div class="container"> |
|
|
|
<h1 style="flex:1"> |
|
|
|
<div class="top-container"> |
|
|
|
<div class="top-left"> |
|
|
|
<input |
|
|
|
class="file-select" |
|
|
|
type="file" |
|
|
|
@change="handleChange" |
|
|
|
> |
|
|
|
<div> |
|
|
|
在线文档查看 |
|
|
|
</div> |
|
|
|
</h1> |
|
|
|
<div style="width: 400px; display: flex; justify-content: center; height: 30px; line-height: 30px; margin-top: 16px"> |
|
|
|
<div class="scale-icon" title="打印" @click="printWindow"> |
|
|
|
<i class="el-icon-printer" />window |
|
|
|
</div> |
|
|
|
<button v-print="printObj" style="height:30px; margin:0 30px;">vue-print打印</button> |
|
|
|
<button type="primary" @click="toImg">转图片打印</button> |
|
|
|
<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="container"> |
|
|
|
<div class="main-content"> |
|
|
|
<div class="content-list">原文列表</div> |
|
|
|
<div class="content-right"> |
|
|
|
<div v-show="loading" class="well loading"> |
|
|
|
正在加载中，请耐心等待... |
|
|
|
</div> |
|
|
|
<div v-show="!loading" id="printArea" ref="output" class="well" /> |
|
|
|
<div v-show="!loading" id="printArea" ref="output" class="well-box" /> |
|
|
|
<div class="water-mask" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</div></template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { getExtend, readBuffer, render } from '@/components/util' |
|
|
|
@ -37,13 +38,9 @@ import { timeFormate } from '@/utils/index' |
|
|
|
import { watermark } from '@/utils/waterMark' |
|
|
|
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js |
|
|
|
import printJS from 'print-js' |
|
|
|
/** |
|
|
|
* 支持嵌入式显示，基于postMessage支持跨域 |
|
|
|
* 示例代码： |
|
|
|
* |
|
|
|
*/ |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'HelloWorld', |
|
|
|
name: 'Preview', |
|
|
|
props: { |
|
|
|
msg: { |
|
|
|
type: String, |
|
|
|
@ -81,7 +78,8 @@ export default { |
|
|
|
// }, 2000) |
|
|
|
// }, |
|
|
|
standard: '', |
|
|
|
extarCss: '' |
|
|
|
extarCss: '', |
|
|
|
watermarkInfo: null |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -120,14 +118,41 @@ export default { |
|
|
|
}, |
|
|
|
async handleChange(e) { |
|
|
|
this.loading = true |
|
|
|
console.log('test', e) |
|
|
|
console.log(e.target) |
|
|
|
console.log(e.target.files) |
|
|
|
try { |
|
|
|
const [file] = e.target.files |
|
|
|
const arrayBuffer = await readBuffer(file) |
|
|
|
this.loading = false |
|
|
|
this.last = await this.displayResult(arrayBuffer, file) |
|
|
|
this.$nextTick(() => { |
|
|
|
// 取得扩展名 |
|
|
|
const extend = getExtend(file.name) |
|
|
|
// 加水印 |
|
|
|
const maskDiv = document.getElementsByClassName('mask_div') |
|
|
|
// const imgMaskDiv = document.getElementsByClassName('water-mask') |
|
|
|
|
|
|
|
this.watermarkInfo = { |
|
|
|
'id': '9C5384EE889C0A977FC8F6', |
|
|
|
'watermarkType': '0', |
|
|
|
'watermarkFont': '16', |
|
|
|
'transparency': 'rgba(255, 69, 0, 0.45)', |
|
|
|
'context': '安全水印', |
|
|
|
'isEnable': true |
|
|
|
} |
|
|
|
// docx-wrapper docx |
|
|
|
for (var j = maskDiv.length - 1; j >= 0; j--) { |
|
|
|
document.getElementsByClassName('water-mask')[0].removeChild(maskDiv[j]) |
|
|
|
} |
|
|
|
|
|
|
|
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 { |
|
|
|
@ -148,26 +173,6 @@ export default { |
|
|
|
output.removeChild(this.last.$el) |
|
|
|
this.last.$destroy() |
|
|
|
} |
|
|
|
// 加水印 |
|
|
|
const maskDiv = document.getElementsByClassName('mask_div') |
|
|
|
const imgMaskDiv = document.getElementsByClassName('weterbox') |
|
|
|
console.log(maskDiv) |
|
|
|
console.log(imgMaskDiv) |
|
|
|
console.log(imgMaskDiv.length) |
|
|
|
console.log(document.getElementsByClassName('box')) |
|
|
|
// for(var i = maskDiv.length - 1; i >= 0; i--){ |
|
|
|
// document.body.removeChild(maskDiv[i]) |
|
|
|
// } |
|
|
|
|
|
|
|
for (var j = imgMaskDiv.length - 1; j >= 0; j--) { |
|
|
|
document.getElementsByClassName('box')[0].removeChild(imgMaskDiv[j]) |
|
|
|
} |
|
|
|
|
|
|
|
if (!extend.includes('pdf')) { |
|
|
|
watermark({ watermark_txt: '徐华姣' + timeFormate() }, 'box', 'text') |
|
|
|
// watermark({ watermark_txt: this.logo }, 'box', 'img') |
|
|
|
} |
|
|
|
|
|
|
|
const child = output.appendChild(node) |
|
|
|
// 调用渲染方法进行渲染 |
|
|
|
return new Promise((resolve, reject) => |
|
|
|
@ -198,7 +203,6 @@ export default { |
|
|
|
page.style.marginBottom = '20px' |
|
|
|
documentBody.appendChild(page) |
|
|
|
} |
|
|
|
|
|
|
|
// 焦点移到新打开的标签页 |
|
|
|
printWindow.focus() |
|
|
|
// 执行打印的方法（注意打印方法是打印的当前窗口内的元素，所以前面才新建一个窗口：print()--打印当前窗口的内容。） |
|
|
|
@ -220,62 +224,71 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|
|
|
<style scoped> |
|
|
|
|
|
|
|
.banner { |
|
|
|
overflow: hidden; |
|
|
|
text-align: center; |
|
|
|
/* background-color: #12b6ff; */ |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
.banner .container{ |
|
|
|
<style lang="scss" scoped> |
|
|
|
.top-container{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.hidden .banner { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
.hidden .well { |
|
|
|
height: calc(100vh - 12px); |
|
|
|
} |
|
|
|
|
|
|
|
.file-select { |
|
|
|
position: absolute; |
|
|
|
left: 5%; |
|
|
|
top: 17px; |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.banner div { |
|
|
|
padding: 0 20px; |
|
|
|
height: 50px; |
|
|
|
line-height: 50px; |
|
|
|
overflow: hidden; |
|
|
|
text-align: center; |
|
|
|
align-items: center; |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
|
|
|
|
.banner h1 { |
|
|
|
.top-left{ |
|
|
|
} |
|
|
|
.top-middle{ |
|
|
|
flex:1; |
|
|
|
text-align: center; |
|
|
|
font-size: 20px; |
|
|
|
line-height: 2; |
|
|
|
margin: 0.5em 0; |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.well { |
|
|
|
display: block; |
|
|
|
background-color: #f2f2f2; |
|
|
|
.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; |
|
|
|
margin: 5px; |
|
|
|
width: calc(100% - 12px); |
|
|
|
height: calc(100vh - 73px); |
|
|
|
overflow: auto; |
|
|
|
border-top: none; |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.loading { |
|
|
|
text-align: center; |
|
|
|
padding-top: 50px; |
|
|
|
.well-box{ |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.messages .warning { |
|
|
|
color: #cc6600; |
|
|
|
.water-mask{ |
|
|
|
position: fixed; |
|
|
|
left: 300px; |
|
|
|
top: 55px; |
|
|
|
bottom: 10px; |
|
|
|
right: 10px; |
|
|
|
width:100%; |
|
|
|
z-index:99; |
|
|
|
pointer-events: none; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
|
