You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
9.6 KiB
308 lines
9.6 KiB
<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>
|