pdfPreview.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <template>
  2. <div v-show="pdf.show">
  3. <!--pdf展示-->
  4. <div style="padding: 0 5%; box-sizing: border-box;">
  5. <div id="mycanvas" ref="mycanvas" style="text-align: center"></div>
  6. </div>
  7. <div style="text-align: center;padding-top: 30px;">
  8. <div v-show="page.currentPage==visiblePage && isLogin==false && page.currentPage!=page.totalPage" style="width: 100%;height: 100%">
  9. <span style="font-size: 20px;font-weight: 700">{{$t('common.resourceDetailsTryRead')}}</span>
  10. <div style="width: 190px;height: 37px;background-color: rgba(24, 144, 255, 1);margin: 15px auto;cursor: pointer;" @click="toViewLogin=true">
  11. <span style="font-size: 18px;font-weight: 400;color: #FFFFFF;line-height: 38px;" >{{$t('common.resourceLogIn')}}</span>
  12. </div>
  13. </div>
  14. </div>
  15. <!--分页-->
  16. <div style="position: relative;width:100%;height: 60px;text-align: center;padding-top: 20px;">
  17. <div style="display: inline-block;width:154px; height: 100%;text-align: center;position: relative;"
  18. class="bottomPage">
  19. <button
  20. style="display: inline-block;width: 32px;height: 32px;background-color: white;border: 1px solid #ddd;position: absolute;top: 0;left: 0;cursor: pointer"
  21. @click="handleCurrentChangeLeft"><
  22. </button>
  23. <div
  24. style="display: inline-block;border: 1px solid #ddd;width: 86px;height: 30px;line-height: 30px;position: absolute;top: 0;left: 33px;">
  25. <span style="display: inline-block;width: 23px;height: 23px;">
  26. <input type="text" v-model="page.inputPage" @change="inputPageChange"
  27. style="width: 23px;height: 23px;border: none;padding: 0;background-color: #0091FF;text-align: center;line-height: 23px;border-radius: 6px;color: white"></input>
  28. </span>
  29. <span
  30. style="display: inline-block;width: 23px;height: 23px;text-align: center;line-height: 23px;">/</span>
  31. <span style="display: inline-block;width: 23px;height: 23px;text-align: center;line-height: 23px;">{{ page.totalPage }}</span>
  32. </div>
  33. <button
  34. style="display: inline-block;width: 32px;height: 32px;background-color: white;border: 1px solid #ddd;position: absolute;top: 0;left: 121px;cursor: pointer"
  35. @click="handleCurrentChangeRight">>
  36. </button>
  37. </div>
  38. </div>
  39. <LoginMusk :toViewLogin="toViewLogin" @LoginBack="LoginBack"></LoginMusk>
  40. </div>
  41. </template>
  42. <script>
  43. import pdf from "../../../public/pdf/build/pdf"
  44. import LoginMusk from '@/components/LoginMusk'
  45. export default {
  46. name: "pdfPreview",
  47. props: {
  48. visible: Boolean,
  49. url: String
  50. },
  51. components:{
  52. LoginMusk
  53. },
  54. data () {
  55. return {
  56. page: {
  57. currentPage: 1,//当前页
  58. totalPage: '',//页数
  59. pageSize: 1,
  60. inputPage: 1,
  61. },
  62. pdf: {
  63. pdfDoc: null,
  64. canvasDom: null,
  65. show:false
  66. },
  67. visiblePage: 3,
  68. isLogin:false,
  69. toViewLogin:false
  70. }
  71. },
  72. mounted () {
  73. if(this.$Cookies.get('token')){
  74. this.isLogin = true;
  75. }else{
  76. this.isLogin = false;
  77. }
  78. },
  79. watch: {
  80. 'url'(oldValue,newValue){
  81. console.log(oldValue)
  82. console.log(newValue)
  83. this.queryFile().then((sta)=>{
  84. if(sta){
  85. this.pdf.show = true
  86. this.getUrl()
  87. }
  88. })
  89. }
  90. },
  91. methods: {
  92. async queryFile(){
  93. var xmlhttp;
  94. if(window.XMLHttpRequest)
  95. {
  96. xmlhttp = new XMLHttpRequest();//其他浏览器
  97. }
  98. else if (window.ActiveXObject)
  99. {
  100. try {
  101. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//旧版IE
  102. }
  103. catch (e) { }
  104. try {
  105. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//新版IE
  106. }
  107. catch (e) { }
  108. if (!xmlhttp) {
  109. }
  110. }
  111. let url = this.url
  112. xmlhttp.open("GET",url,false);
  113. xmlhttp.send();
  114. if(xmlhttp.readyState==4){
  115. if(xmlhttp.status==200)
  116. return true
  117. else
  118. return false
  119. }
  120. },
  121. getUrl () {
  122. if(this.url){
  123. this.getPdf(this.url)
  124. }
  125. },
  126. getPdf (url) {
  127. this.$refs.mycanvas.scrollTop = 0
  128. let pdfjsLib = pdf
  129. pdfjsLib.GlobalWorkerOptions.workerSrc = '../../../public/pdf/build/pdf.worker.js'
  130. let loadingTask = pdfjsLib.getDocument(url)
  131. loadingTask.promise.then((pdf) => {
  132. this.page.totalPage = pdf.numPages
  133. if(this.isLogin){
  134. this.visiblePage = this.page.totalPage
  135. }
  136. this.pdf.pdfDoc = pdf
  137. this.pdf.canvasDom = document.getElementById('mycanvas')
  138. this.getPage(this.pdf.pdfDoc, this.page.currentPage, this.pdf.canvasDom, this.page.totalPage)
  139. }, function (reason) {
  140. alert(reason)
  141. });
  142. },
  143. getPage (pdf, pageNumber, container, numPages) { //获取pdf
  144. pdf.getPage(pageNumber).then((page) => {
  145. // let scale = (container.offsetWidth / page.view[3])
  146. let scale = 1;
  147. let viewport = page.getViewport({scale: scale})
  148. let canvas = document.createElement("canvas")
  149. canvas.width = viewport.width
  150. canvas.height = viewport.height
  151. container.appendChild(canvas)
  152. let ctx = canvas.getContext('2d');
  153. let renderContext = {
  154. canvasContext: ctx,
  155. transform: [1, 0, 0, 1, 0, 0],
  156. viewport: viewport,
  157. intent: 'print'
  158. };
  159. page.render(renderContext)
  160. })
  161. },
  162. handleCurrentChangeLeft () {
  163. const that = this;
  164. if (that.page.currentPage > 1) {
  165. --that.page.currentPage
  166. --that.page.inputPage
  167. this.pdf.canvasDom.removeChild(this.pdf.canvasDom.childNodes[0])
  168. this.getPage(this.pdf.pdfDoc, this.page.currentPage, this.pdf.canvasDom, this.page.totalPage)
  169. }
  170. },
  171. handleCurrentChangeRight () {
  172. const that = this;
  173. if (that.page.currentPage < that.page.totalPage && that.page.currentPage < that.visiblePage) {
  174. ++that.page.currentPage
  175. ++that.page.inputPage
  176. this.pdf.canvasDom.removeChild(this.pdf.canvasDom.childNodes[0])
  177. this.getPage(this.pdf.pdfDoc, this.page.currentPage, this.pdf.canvasDom, this.page.totalPage)
  178. }
  179. },
  180. inputPageChange () {
  181. // console.log(parseInt(this.page.inputPage) < parseInt(this.visiblePage))
  182. // console.log(0 < parseInt(this.page.inputPage) < parseInt(this.visiblePage))
  183. if (parseInt(this.page.inputPage) < 0) {
  184. this.page.inputPage = 0;
  185. }
  186. if (parseInt(this.page.inputPage) < parseInt(this.visiblePage)) {
  187. this.page.currentPage = parseInt(this.page.inputPage);
  188. } else {
  189. this.page.inputPage = this.visiblePage;
  190. this.page.currentPage = this.visiblePage;
  191. }
  192. this.pdf.canvasDom.removeChild(this.pdf.canvasDom.childNodes[0])
  193. this.getPage(this.pdf.pdfDoc, this.page.currentPage, this.pdf.canvasDom, this.page.totalPage)
  194. },
  195. LoginBack (data) {
  196. this.toViewLogin = false;
  197. },
  198. }
  199. }
  200. </script>
  201. <style scoped>
  202. .bottomPage button:active {
  203. border-color: #0ab8ed;
  204. outline: 1px solid #0ab8ed;
  205. }
  206. .bottomPage button:focus {
  207. border-color: #0ab8ed;
  208. outline: 1px solid #0ab8ed;
  209. }
  210. .bottomPage input:focus {
  211. outline: none;
  212. border: none;
  213. box-shadow: none;
  214. }
  215. </style>