pdfView.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2. <div class="common-pdfView-modal">
  3. <div>
  4. <div id="canvas"></div>
  5. <div class="tools">
  6. <div>
  7. 调整比例:{{ Math.round(scalVal*100) }}%
  8. <div>
  9. <u-button :disabled="scalLoading" style="margin-right: 10px;" size="mini" @click="setScalVal(0)"><a-icon type="minus" /> 缩小</u-button>
  10. <u-button :disabled="scalLoading" size="mini" @click="setScalVal(1)"><a-icon type="plus" /> 放大</u-button>
  11. </div>
  12. </div>
  13. <div>
  14. <div v-if="hasClipboard">
  15. <u-button :disabled="scalLoading" size="mini" @click="handleCapture('export')"><a-icon type="export" /> 导出图片</u-button>
  16. </div>
  17. </div>
  18. <div>
  19. </div>
  20. </div>
  21. <div :style="{width: '100%',height: '70vh',margin:'0 auto',padding: '10px 0',overflow:'auto'}">
  22. <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>
  23. <pdf
  24. ref="pdf"
  25. v-for="(item,index) in pdfList"
  26. :key="'pdf-'+index"
  27. :style="{width: Math.round(scalVal*100)+'%',margin:'0 auto'}"
  28. :src="getUrl('data:application/pdf;base64,' + item)"
  29. :page="page"
  30. :rotate="rotate"
  31. @error="error"
  32. ></pdf>
  33. </div>
  34. </div>
  35. <div class="btn-box">
  36. <u-button size="large" style="margin-right: 25px;" @click="handleCommonCancel">取消</u-button>
  37. <u-button size="large" style="margin-right: 25px;" type="default" @click="handleCapture(hasClipboard?'copy':'export')">
  38. {{ hasClipboard?'复制截图':'导出图片' }}
  39. </u-button>
  40. </div>
  41. </div>
  42. </template>
  43. <script>
  44. import moment from 'moment'
  45. import pdf from 'vue-pdf-signature'
  46. import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
  47. export default {
  48. components: {
  49. pdf
  50. },
  51. name: 'PdfView',
  52. data () {
  53. return {
  54. scalLoading: false,
  55. pdfAllLoad: 0,
  56. scalVal: 0.75,
  57. show: true,
  58. pdfList: [],
  59. src: '',
  60. loadedRatio: 0,
  61. page: 1,
  62. numPages: 0,
  63. rotate: 0,
  64. curpage: 1,
  65. total: 3,
  66. }
  67. },
  68. computed: {
  69. hasClipboard () {
  70. return typeof ClipboardItem !== 'undefined'
  71. }
  72. },
  73. onload(opts){
  74. this.setData()
  75. },
  76. methods: {
  77. // 缩放
  78. setScalVal (t) {
  79. if (!this.scalLoading) {
  80. this.scalLoading = true
  81. this.scalVal = this.scalVal + (t ? 0.05 : -0.05)
  82. if (this.scalVal > 1) {
  83. this.scalVal = 1
  84. }
  85. if (this.scalVal < 0.5) {
  86. this.scalVal = 0.5
  87. }
  88. setTimeout(() => {
  89. this.scalLoading = false
  90. }, 1000)
  91. }
  92. },
  93. getUrl (item) {
  94. const src = pdf.createLoadingTask({ url: item, CMapReaderFactory })
  95. return src
  96. },
  97. setData () {
  98. this.pdfList = this.$store.state.vuex_tempData
  99. this.curpage = 1
  100. this.total = data.length
  101. },
  102. error: function (err) {
  103. console.log(err)
  104. },
  105. // 取消
  106. handleCommonCancel () {
  107. this.pdfList = []
  108. uni.navigateBack()
  109. },
  110. // 截图
  111. handleCapture (type) {
  112. if (this.scalLoading) { return }
  113. const pdf = this.$refs.pdf
  114. const len = pdf.length
  115. const imgsList = []
  116. const canvas = document.createElement('canvas')
  117. let maxHeight = 0
  118. const maxWidth = pdf[0].$refs.canvas.width
  119. for (let i = 0; i < len; i++) {
  120. const imgs = pdf[i].$refs.canvas
  121. maxHeight = maxHeight + imgs.height
  122. imgsList.push(imgs)
  123. }
  124. // 设置画布宽度和高度
  125. canvas.width = maxWidth
  126. canvas.height = maxHeight
  127. const ctx = canvas.getContext('2d')
  128. // 开始合并
  129. let y = 0
  130. imgsList.map(item => {
  131. ctx.drawImage(item, 0, y, item.width, item.height)
  132. y = y + item.height
  133. })
  134. const base64Str = canvas.toDataURL('image/png')
  135. // 复制图片
  136. if (type == 'copy') {
  137. this.copyImgBtn(base64Str)
  138. }
  139. // 下载图片
  140. if (type == 'export') {
  141. const fileName = moment().format('YYYYMMDDHHmmss')
  142. this.downloadFile(fileName, base64Str)
  143. }
  144. // 清除画布
  145. ctx.clearRect(0, 0, maxWidth, maxHeight)
  146. },
  147. downloadFile (fileName, base64Data) {
  148. const aLink = document.createElement('a')
  149. const blob = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
  150. const evt = document.createEvent('HTMLEvents')
  151. // initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
  152. evt.initEvent('click', true, true)
  153. aLink.download = fileName
  154. aLink.href = URL.createObjectURL(blob)
  155. aLink.click()
  156. },
  157. // 将照片复制到剪贴版
  158. copyImgBtn (base64Data) {
  159. const blobInput = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
  160. if (navigator.clipboard) {
  161. const clipboardItemInput = new ClipboardItem({ 'image/png': blobInput })
  162. navigator.clipboard.write([clipboardItemInput])
  163. this.$message.success('截图成功,可以右键去粘贴图片!')
  164. } else {
  165. const image = nativeImageElectron.createFromDataURL(base64Data)
  166. clipboardElectron.writeImage(image)
  167. this.$message.success('截图成功,可以右键去粘贴图片!')
  168. }
  169. },
  170. convertBase64ToBlob (base64, type) {
  171. var bytes = window.atob(base64)
  172. var ab = new ArrayBuffer(bytes.length)
  173. var ua = new Uint8Array(ab)
  174. for (var i = 0; i < bytes.length; i++) {
  175. ua[i] = bytes.charCodeAt(i)
  176. }
  177. return new Blob([ab], { type: type })
  178. }
  179. },
  180. watch: {
  181. }
  182. }
  183. </script>
  184. <style lang="less">
  185. .common-pdfView-modal{
  186. background-color: #666;
  187. .tools{
  188. padding: 10px;
  189. display: flex;
  190. align-items: center;
  191. border-bottom: 1px solid #eee;
  192. background-color: #f8f8f8;
  193. justify-content: space-between;
  194. > div{
  195. display: flex;
  196. align-items: center;
  197. >div{
  198. padding: 0 10px;
  199. }
  200. }
  201. }
  202. .btn-box{
  203. text-align: center;
  204. margin-top: 20px;
  205. }
  206. }
  207. </style>