FilePreView.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <!-- 图片、pdf、docx 预览
  3. "docx-preview": "^0.1.4",
  4. "jszip": "^3.10.0",-->
  5. <div style="width:100%;height:100%;">
  6. <div title="文件预览" v-if="showDoc || showPdf || showImg" width="750px" style="background: #FFF !important;width:100%;height:100%;">
  7. <template slot="closeIcon">
  8. <el-icon icon="close-circle" class="closeIcon" />
  9. </template>
  10. <template slot="footer">
  11. <div v-if="showPdf" class="pdf-layout-page">
  12. <el-button @click="changePdfPage(0)" :disabled="currentPage === 1" name="上一页" />
  13. {{ currentPage }} / {{ pageCount }}
  14. <el-button @click="changePdfPage(1)" :disabled="currentPage === pageCount" name="下一页" />
  15. </div>
  16. <el-button name="取消" @click="cancel" />
  17. </template>
  18. <div class="modal-body form">
  19. <div v-if="showImg">
  20. <img :src="images" preview="1" preview-text="" style="width: 100%" />
  21. </div>
  22. <div v-show="showDoc" ref="word">
  23. <iframe v-if="fileUrl" frameborder="0" :src="fileUrl" width="100%" height="100%"> </iframe>
  24. </div>
  25. <div v-show="showPdf" class="pdf-layout" id="top">
  26. <pdf-view
  27. ref="pdf"
  28. :src="pdfPath"
  29. :page="currentPage"
  30. @num-pages="pageCount = $event"
  31. @page-loaded="currentPage = $event"
  32. @loaded="loadPdfHandler"
  33. />
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </template>
  39. <script>
  40. import pdfView from "vue-pdf";
  41. import axios from "axios";
  42. const docxPre = require("docx-preview");
  43. window.JSZip = require("jszip");
  44. export default {
  45. name: "FilePreView",
  46. components: { pdfView },
  47. data() {
  48. return {
  49. showDoc: false, //判断如果是否为word文件显示
  50. showPdf: false, //判断如果是否为pdf文件显示
  51. showImg: false, //判断如果是否为图片显示
  52. fileUrl: "", //pdf链接
  53. pdfPath: "", //pdf地址
  54. images: "", //图片链接
  55. currentPage: 0, // pdf文件页码
  56. pageCount: 0 // pdf文件总页数
  57. };
  58. },
  59. methods: {
  60. showView(filePath) {
  61. let that = this;
  62. let type = filePath.split(".")[filePath.split(".").length - 1];
  63. if (type === "jpg" || type === "png" || type === "jpeg") {
  64. that.images = filePath;
  65. that.showImg = true;
  66. } else if (type === "pdf") {
  67. that.loadPdfHandler(); //重置pdf第一页展示
  68. that.pdfPath = filePath;
  69. that.showPdf = true;
  70. } else if (type === "doc") {
  71. //word预览
  72. that.fileUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + filePath;
  73. that.showDoc = true;
  74. } else if (type === "docx") {
  75. //word预览
  76. that.showDoc = true;
  77. that.previewWord(filePath);
  78. }
  79. },
  80. // 后端返回二进制流
  81. previewWord(filePath) {
  82. let that = this;
  83. // 这里需要提起打开弹窗,因为有时很找不到word的ref 会报错
  84. axios({
  85. method: "get",
  86. responseType: "blob", // 因为是流文件,所以要指定blob类型
  87. url: filePath
  88. }).then(({ data }) => {
  89. docxPre.renderAsync(data, this.$refs.word);
  90. });
  91. },
  92. //pdf上一页下一页操作
  93. changePdfPage(val) {
  94. if (val === 0 && this.currentPage > 1) {
  95. this.currentPage--;
  96. }
  97. if (val === 1 && this.currentPage < this.pageCount) {
  98. this.currentPage++;
  99. this.top();
  100. }
  101. },
  102. top() {
  103. document.querySelector("#top").scrollIntoView(true);
  104. },
  105. // pdf加载时
  106. loadPdfHandler(e) {
  107. this.currentPage = 1; // 加载的时候先加载第一页
  108. },
  109. cancel() {
  110. this.showDoc = false; //判断如果是否为word文件显示
  111. this.showPdf = false; //判断如果是否为pdf文件显示
  112. this.showImg = false; //判断如果是否为图片显示
  113. }
  114. }
  115. };
  116. </script>
  117. <style lang="less" scoped>
  118. .form {
  119. height: 100%;
  120. overflow: auto;
  121. }
  122. .pdf-layout-page {
  123. left: 30%;
  124. margin: auto;
  125. display: inline-block;
  126. text-align: center;
  127. font-size: 14px;
  128. position: absolute;
  129. }
  130. </style>