pdfViewModal.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <template>
  2. <a-modal
  3. centered
  4. class="common-pdfView-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. v-model="isShow"
  8. :title="modalTit"
  9. :zIndex="1001"
  10. destroyOnClose
  11. @cancel="handleCommonCancel"
  12. width="1024px">
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <div class="common-main">
  15. <div id="canvas"></div>
  16. <div class="tools">
  17. <div>
  18. 调整比例:{{ Math.round(scalVal*100) }}%
  19. <div>
  20. <a-button size="small" @click="setScalVal(0)"><a-icon type="minus" /> 缩小</a-button>
  21. <a-button size="small" @click="setScalVal(1)"><a-icon type="plus" /> 放大</a-button>
  22. </div>
  23. </div>
  24. <div>
  25. 选择打印机:
  26. <div>
  27. <a-select size="small" style="width:200px;" v-model="printIndex" @change="changePrint" placeholder="选择打印机">
  28. <a-select-option v-for="item in printList" :key="'print-'+item.value" :value="item.name">
  29. {{ item.name }}
  30. </a-select-option>
  31. </a-select>
  32. </div>
  33. </div>
  34. </div>
  35. <vue-scroll :ops="ops" :style="{width: Math.round(scalVal*100)+'%',height: '70vh',margin:'0 auto'}">
  36. <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>
  37. <pdf
  38. ref="pdf"
  39. v-for="(item,index) in pdfList"
  40. :key="'pdf-'+index"
  41. :style="{width: '100%'}"
  42. :src="getUrl('data:application/pdf;base64,' + item)"
  43. :page="page"
  44. :rotate="rotate"
  45. @progress="loadedRatio = $event"
  46. @error="error"
  47. @num-pages="numPages = $event"
  48. @link-clicked="page = $event"></pdf>
  49. </vue-scroll>
  50. </div>
  51. <div class="btn-box">
  52. <a-button size="large" style="margin-right: 25px;" @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
  53. <a-button size="large" type="primary" :loading="$store.state.app.printLoading" @click="handleCommonOk">
  54. {{ $store.state.app.printLoading?'打印中...':okText }}
  55. </a-button>
  56. </div>
  57. </a-spin>
  58. </a-modal>
  59. </template>
  60. <script>
  61. import pdf from 'vue-pdf-signature'
  62. import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
  63. import { pdfPrint, getPrintList, hasExitTaskByName } from '@/libs/JGPrint'
  64. export default {
  65. components: {
  66. pdf
  67. },
  68. name: 'PdfViewModal',
  69. props: {
  70. openModal: { // 弹框显示状态
  71. type: Boolean,
  72. default: false
  73. },
  74. modalTit: { // 弹框标题
  75. type: String,
  76. default: '打印预览'
  77. },
  78. okText: { // 确定 按钮文字
  79. type: String,
  80. default: '打印'
  81. },
  82. cancelText: { // 取消 按钮文字
  83. type: String,
  84. default: '取消'
  85. },
  86. isCancel: { // 是否显示 取消 按钮
  87. type: Boolean,
  88. default: true
  89. },
  90. spinning: { // 加载中
  91. type: Boolean,
  92. default: false
  93. }
  94. },
  95. data () {
  96. return {
  97. scalVal: 0.9,
  98. isShow: this.openModal, // 是否打开弹框
  99. show: true,
  100. pdfList: [],
  101. src: '',
  102. loadedRatio: 0,
  103. page: 1,
  104. numPages: 0,
  105. rotate: 0,
  106. curpage: 1,
  107. total: 3,
  108. ops: {
  109. vuescroll: {},
  110. scrollPanel: {},
  111. rail: {
  112. keepShow: true
  113. },
  114. bar: {
  115. hoverStyle: true,
  116. onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
  117. background: '#9d9d9d', // 滚动条颜色
  118. opacity: 0.5, // 滚动条透明度
  119. size: '10px',
  120. 'overflow-x': 'hidden'
  121. }
  122. },
  123. printIndex: undefined,
  124. printList: []
  125. }
  126. },
  127. methods: {
  128. // 选择打印机
  129. changePrint (v) {
  130. this.printIndex = v
  131. this.$store.commit('SET_printDefNeedle', this.printIndex)
  132. this.$store.state.app.printTaskID = undefined
  133. },
  134. // 缩放
  135. setScalVal (t) {
  136. this.scalVal = this.scalVal + (t ? 0.05 : -0.05)
  137. if (this.scalVal > 1) {
  138. this.scalVal = 1
  139. }
  140. if (this.scalVal < 0.5) {
  141. this.scalVal = 0.5
  142. }
  143. },
  144. getUrl (item) {
  145. const src = pdf.createLoadingTask({ url: item, CMapReaderFactory })
  146. return src
  147. },
  148. setData (data) {
  149. // console.log(data)
  150. this.pdfList = data
  151. this.src = data[0]
  152. this.curpage = 1
  153. this.total = data.length
  154. // 获取打印机列表
  155. this.printList = getPrintList()
  156. const defPrint = this.$store.state.app.printDefNeedle
  157. this.printIndex = defPrint ? (defPrint == 'undefined' ? undefined : defPrint) : undefined
  158. },
  159. error: function (err) {
  160. console.log(err)
  161. },
  162. // 确定
  163. handleCommonOk () {
  164. const _this = this
  165. const hasPrint = this.printList.find(item => item.name == this.printIndex)
  166. // 已选择打印机
  167. if (hasPrint) {
  168. hasExitTaskByName(function () {
  169. pdfPrint(_this.$store.state.app.pdfPrintList, 0)
  170. })
  171. } else {
  172. this.$message.info('请选择打印机')
  173. }
  174. _this.$emit('ok')
  175. },
  176. // 取消
  177. handleCommonCancel () {
  178. this.isShow = false
  179. this.pdfList = []
  180. this.$store.commit('SET_pdfPrintList', [])
  181. this.$store.commit('SET_showPdfPrint', false)
  182. this.$emit('cancel')
  183. this.scalVal = 0.9
  184. },
  185. // 下载
  186. handleDownload () {
  187. console.log(this.$refs.pdf[0].pdf)
  188. }
  189. },
  190. watch: {
  191. // 父页面传过来的弹框状态
  192. openModal (newValue, oldValue) {
  193. this.isShow = newValue
  194. },
  195. // 重定义的弹框状态
  196. isShow (newValue, oldValue) {
  197. if (!newValue) {
  198. this.$emit('cancel')
  199. }
  200. }
  201. }
  202. }
  203. </script>
  204. <style lang="less">
  205. .common-pdfView-modal{
  206. .ant-modal-body{
  207. padding: 0 0 30px 0;
  208. }
  209. .common-main{
  210. background-color: #fff;
  211. .tools{
  212. padding: 10px;
  213. display: flex;
  214. align-items: center;
  215. border-bottom: 1px solid #eee;
  216. background-color: #f8f8f8;
  217. > div{
  218. display: flex;
  219. align-items: center;
  220. >div{
  221. padding: 0 10px;
  222. }
  223. }
  224. }
  225. }
  226. .btn-box{
  227. text-align: center;
  228. margin-top: 20px;
  229. }
  230. }
  231. </style>