|
@@ -22,9 +22,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- 截图:
|
|
|
<div>
|
|
|
- <a-button :disabled="scalLoading" size="small" @click="handleDownload()"><a-icon type="copy" /> 复制截图</a-button>
|
|
|
+ <a-button :disabled="scalLoading" size="small" @click="handleCapture('export')"><a-icon type="export" /> 导出图片</a-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
@@ -38,7 +37,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <vue-scroll :ops="ops" :style="{width: '100%',height: '70vh',margin:'0 auto'}">
|
|
|
+ <vue-scroll :ops="ops" :style="{width: '100%',height: '70vh',margin:'0 auto',padding: '10px 0'}">
|
|
|
<div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
|
|
|
<pdf
|
|
|
ref="pdf"
|
|
@@ -54,6 +53,9 @@
|
|
|
</div>
|
|
|
<div class="btn-box">
|
|
|
<a-button size="large" style="margin-right: 25px;" @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
|
|
|
+ <a-button size="large" style="margin-right: 25px;" type="default" @click="handleCapture(hasClipboard?'copy':'export')">
|
|
|
+ {{ hasClipboard?'复制截图':'导出图片' }}
|
|
|
+ </a-button>
|
|
|
<a-button size="large" type="primary" :loading="$store.state.app.printLoading" @click="handleCommonOk">
|
|
|
{{ $store.state.app.printLoading?'打印中...':okText }}
|
|
|
</a-button>
|
|
@@ -63,6 +65,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import moment from 'moment'
|
|
|
import pdf from 'vue-pdf-signature'
|
|
|
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
|
|
|
import { pdfPrint, getPrintList, hasExitTaskByName } from '@/libs/JGPrint'
|
|
@@ -131,6 +134,11 @@ export default {
|
|
|
printList: []
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ hasClipboard () {
|
|
|
+ return !!typeof ClipboardItem
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 选择打印机
|
|
|
changePrint (v) {
|
|
@@ -194,8 +202,8 @@ export default {
|
|
|
this.$emit('cancel')
|
|
|
this.scalVal = 0.75
|
|
|
},
|
|
|
- // 下载
|
|
|
- handleDownload () {
|
|
|
+ // 截图
|
|
|
+ handleCapture (type) {
|
|
|
if (this.scalLoading) { return }
|
|
|
const pdf = this.$refs.pdf
|
|
|
const len = pdf.length
|
|
@@ -218,12 +226,29 @@ export default {
|
|
|
ctx.drawImage(item, 0, y, item.width, item.height)
|
|
|
y = y + item.height
|
|
|
})
|
|
|
- // 复制图片
|
|
|
const base64Str = canvas.toDataURL('image/png')
|
|
|
- this.copyImgBtn(base64Str)
|
|
|
+ // 复制图片
|
|
|
+ if (type == 'copy') {
|
|
|
+ this.copyImgBtn(base64Str)
|
|
|
+ }
|
|
|
+ // 下载图片
|
|
|
+ if (type == 'export') {
|
|
|
+ const fileName = moment().format('YYYYMMDDHHmmss')
|
|
|
+ this.downloadFile(fileName, base64Str)
|
|
|
+ }
|
|
|
// 清除画布
|
|
|
ctx.clearRect(0, 0, maxWidth, maxHeight)
|
|
|
},
|
|
|
+ downloadFile (fileName, base64Data) {
|
|
|
+ const aLink = document.createElement('a')
|
|
|
+ const blob = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
|
|
|
+ const evt = document.createEvent('HTMLEvents')
|
|
|
+ // initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
|
|
|
+ evt.initEvent('click', true, true)
|
|
|
+ aLink.download = fileName
|
|
|
+ aLink.href = URL.createObjectURL(blob)
|
|
|
+ aLink.click()
|
|
|
+ },
|
|
|
// 将照片复制到剪贴版
|
|
|
copyImgBtn (base64Data) {
|
|
|
const blobInput = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
|
|
@@ -265,10 +290,10 @@ export default {
|
|
|
<style lang="less">
|
|
|
.common-pdfView-modal{
|
|
|
.ant-modal-body{
|
|
|
- padding: 0 0 30px 0;
|
|
|
+ padding: 0 0 20px 0;
|
|
|
}
|
|
|
.common-main{
|
|
|
- background-color: #fff;
|
|
|
+ background-color: #666;
|
|
|
.tools{
|
|
|
padding: 10px;
|
|
|
display: flex;
|