Vue2项目-二进制流预览

时间：2024-10-21 22:28:02

一、docx文档

软件：docx-preview；

版本："^0.1.20"；

1、安装docx-preview
npm i docx-preview@0.1.20
2、组件配置
<template>
    <div ref="wordContainer"></div>
</template>

<script>
import { renderAsync } from "docx-preview";
export default {
  data(){
    return {
      id:""
    }
  },
  methods:{
    getDocument(){
        this.$API.getDocumentRequest(this.id).then(res=>{
          this.$nextTick(() => {
            renderAsync(res, this.$refs.wordContainer, null);
          });
        })
    }
  }
}
</script>

二、pdf文档

软件：pdfjs-dist；

版本："^2.0.943"；

1、安装pdfjs-dist
npm i pdfjs-dist@2.0.943
2、组件配置
<template>
    <div ref="pdfContainer"></div>
</template>

<script>
import pdfjsLib from "pdfjs-dist";
export default {
  data(){
    return {
      id:""
    }
  },
  methods:{
    getDocument(){
        this.$API.getDocumentRequest(this.id).then(res=>{
          this.$nextTick(() => {
             pdfjsLib.getDocument(window.URL.createObjectURL(res)).promise.then((pdf) =>{
                return pdf;
              }).then((pdf) => {
                let pdfContainer = document.getElementById("pdfContainer");
                for (let i = 1; i <= pdf.numPages; i++) {
                  pdf.getPage(i).then((page) => {
                    let viewport = page.getViewport(3);
                    let canvas = document.createElement("canvas");
                    pdfContainer.appendChild(canvas);
                    let context = canvas.getContext("2d");
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    let renderContext = {
                      canvasContext: context,
                      viewport: viewport,
                    };
                    page.render(renderContext);
                  });
                }
              });
          });
        })
    }
  }
}
</script>

三、pptx文档

软件：PPTXjs；

版本：1.21.1；

地址：发布 ·meshesha/PPTXjs (github.com)

说明：1.21.1版本中的jszip.min.js为3.0版本，如果控制台有jszip.min.js相关报错，可以使用1.21.00版本中的jszip.min.js文件（仅替换jszip.min.js文件即可）。或者直接使用PPTXjs旧版本。

1、index.html配置
  <!---------- PPTXjs ---------->
  <!-- css -->
  <link rel="stylesheet" href="/PPTXjs/css/pptxjs.css" />
  <link rel="stylesheet" href="/PPTXjs/css/nv.d3.min.css" />
  <!-- for charts graphs -->
  <script type="text/javascript" src="/PPTXjs/js/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="/PPTXjs/js/jszip.min.js"></script>
  <!-- v2.. , NOT v.3.. -->
  <script type="text/javascript" src="/PPTXjs/js/filereader.js"></script>
  <!--https://github.com/meshesha/filereader.js -->
  <script type="text/javascript" src="/PPTXjs/js/d3.min.js"></script>
  <!-- for charts graphs -->
  <script type="text/javascript" src="/PPTXjs/js/nv.d3.min.js"></script>
  <!-- for charts graphs -->
  <script type="text/javascript" src="/PPTXjs/js/pptxjs.js"></script>
  <script type="text/javascript" src="/PPTXjs/js/divs2slides.js"></script>
  <!---------- PPTXjs ---------->
2、组件配置
<template>
    <div ref="pptContainer"></div>
</template>

<script>
export default {
  data(){
    return {
      id:""
    }
  },
  methods:{
    getDocument(){
        this.$API.getDocumentRequest(id).then(res=>{
          this.$nextTick(() => {
            $("#pptContainer").pptxToHtml({
              pptxFileUrl: window.URL.createObjectURL(res),
              slidesScale: "100%",
              slideMode: false,
              keyBoardShortCut: false,
            });
        })
    }
  }
}
</script>

四、视频预览

1、组件配置
<template>
    <div>
        <video controls :src="videoSrc"></video>
    </div>
</template>

<script>
export default {
  data(){
    return {
      id:"",
      videoSrc:"",  
    }
  },
  methods:{
    getVideo() {
      this.$API.getVideoRequest(this.id).then((res) => {
          this.$nextTick(() => {
             this.videoSrc = URL.createObjectURL(res);
          });
      })
    },
  }
}

</script>

五、文档下载

软件：downloadjs

版本："1.4.7"；

1、安装
npm i downloadjs@1.4.7
2、组件配置
<template>
    <div>
        <el-button type="primary" @click="downloadDocument">下载文件</video>
    </div>
</template>
<script>
import download from "downloadjs";
export default {
  data(){
    return {
      id:"",
    }
  }
  methods:{
    downloadDocument() {
      this.$API.getDocumentRequest(this.id).then((res) => {
          if (res) {
            download(res, "下载的文件名");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  }
}
</script>

六、示例

<template>
  <div v-if="show" class="showCourseWare">
    <div class="showCourseWareHeader">
      <span class="title">{{ "文件预览页面标题" }}</span>
      <span
        title="下载文档"
        class="el-icon-download"
        @click="downloadDocument"></span>
      <span title="关闭预览" class="el-icon-close" @click="closeWin"></span>
    </div>
    <div class="showCourseWareContainer">
      <div class="showCourseWareBox" v-if="showDocument">
        <!-- DOCX文档 -->
        <div
          v-if="showWord"
          class="showCourseWareContent"
          ref="wordContainer"></div>
        <!-- PDF文档 -->
        <div
          v-else-if="showPDF"
          class="showCourseWareContent"
          id="pdfContainer"></div>
        <!-- PPTX文档 -->
        <div
          v-else-if="showPPT"
          class="showCourseWareContent"
          ref="pptContainer"
          id="pptContainer"></div>
      </div>

      <div class="showVideoBox" v-if="showVideo">
        <video controls :src="videoSrc"></video>
      </div>
    </div>
  </div>
</template>

<script>
// docx文件预览
import { renderAsync } from "docx-preview";
// pdf文件预览
import pdfjsLib from "pdfjs-dist";
// 文件下载
import download from "downloadjs";

export default {
  name: "",
  components: {},
  props: {
    selectCourseWare: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      show: false,
      showWord: false, // word
      showPDF: false, // pdf
      showPPT: false, // pptx
      showDocument: false, // 文档
      showVideo: false, // 视频
      videoSrc: "", // 视频地址
      rowData: {},
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 根据ID获取文件
    getDocument() {
      this.$API.getDocumentRequest(this.rowData.id).then((res) => {
        if (
          // DOCX
          res.type == "application/msword" ||
          res.type ==
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        ) {
          this.showWord = true;
          this.showPDF = false;
          this.showPPT = false;
          this.showVideo = false;
          // 渲染文档
          this.$nextTick(() => {
            renderAsync(res, this.$refs.wordContainer, null);
          });
        } else if (res.type == "application/pdf") {
          // PDF
          this.showWord = false;
          this.showPDF = true;
          this.showPPT = false;
          this.showVideo = false;
          // 渲染文档
          this.$nextTick(() => {
            pdfjsLib
              .getDocument(window.URL.createObjectURL(res))
              .promise.then((pdf) => {
                return pdf;
              })
              .then((pdf) => {
                let pdfContainer = document.getElementById("pdfContainer");
                for (let i = 1; i <= pdf.numPages; i++) {
                  pdf.getPage(i).then((page) => {
                    let viewport = page.getViewport(3);
                    let canvas = document.createElement("canvas");
                    pdfContainer.appendChild(canvas);
                    let context = canvas.getContext("2d");
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    let renderContext = {
                      canvasContext: context,
                      viewport: viewport,
                    };
                    page.render(renderContext);
                  });
                }
              });
          });
        } else if (
          // PPTX
          res.type == "application/vnd.ms-powerpoint" ||
          res.type ==
            "application/vnd.openxmlformats-officedocument.presentationml.presentation"
        ) {
          this.showWord = false;
          this.showPDF = false;
          this.showPPT = true;
          this.showVideo = false;

          this.$nextTick(() => {
            $("#pptContainer").pptxToHtml({
              pptxFileUrl: window.URL.createObjectURL(res),
              slidesScale: "100%",
              slideMode: false,
              keyBoardShortCut: false,
            });
          });
        } else {
          this.showWord = false;
          this.showPDF = false;
          this.showPPT = false;
          this.showVideo = false;
          this.$message.warning(
            "只支持.docx、pptx、pdf和视频文件预览，其他类型文件请下载后查看"
          );
        }
      });
    },

    // 下载文档
    downloadDocument() {
      this.$API
        .getDocumentRequest(this.rowData.id)
        .then((res) => {
          if (res) {
            download(res, this.rowData.coursewareUrl);
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.success("文件下载接口访问失败");
        });
    },

    // 根据ID获取视频文件
    getVideo() {
      this.$API
        .getVideoRequest(this.rowData.id)
        .then((res) => {
          if (res) {
            this.$nextTick(() => {
              this.videoSrc = URL.createObjectURL(res);
            });
          } else {
            this.$message.error("视频获取失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("视频获取接口访问失败");
        });
    },

    // 打开窗口
    openWin() {
      this.show = true;

      this.$nextTick(() => {
        this.rowData = JSON.parse(JSON.stringify(this.selectCourseWare));

        switch (this.rowData.type) {
          case 0: // 文件
            this.showDocument = true;
            this.getDocument();
            break;
          case 1: // 视频
            this.showVideo = true;
            this.getVideo();
            break;
        }
      });
    },

    // 关闭窗口
    closeWin() {
      this.show = false;

      this.rowData = {};
      this.showWord = false; // word
      this.showPDF = false; // pdf
      this.showPPT = false; // pptx
      this.showDocument = false; // 文档
      this.showVideo = false; // 视频
      this.videoSrc = ""; // 视频路径

      this.$emit("callback");
    },
  },
};
</script>

<style lang="less" scoped>
.showCourseWare {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);

  .showCourseWareHeader {
    width: 100%;
    height: 50px;
    background-color: #fff;
    box-shadow: 0 1px 5px -1px #039fee;
    z-index: 10000;
    position: relative;

    .el-icon-download {
      position: absolute;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #039fee;
      cursor: pointer;
    }

    .title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .el-icon-close {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      cursor: pointer;

      &:hover {
        color: tomato;
      }
    }
  }

  .showCourseWareContainer {
    width: 100%;
    height: calc(100% - 50px);
    overflow-y: auto;

    .showCourseWareBox {
      width: 100%;
      margin: 10px 0px;
      display: flex;
      align-items: center !important;
      justify-content: center;

      .showCourseWareContent {
        width: 60%;

        // docx
        /deep/ .docx-wrapper {
          width: 100%;
          height: 100%;
          padding: 0px;
          box-sizing: border-box;
          background-color: transparent !important;

          .docx {
            width: 100% !important;
            height: 100%;
            margin-bottom: 10px;

            &:last-child {
              margin: 0px;
            }
          }
        }

        // pdf
        /deep/ canvas {
          width: 100% !important;
          margin-bottom: 10px;
          vertical-align: bottom;

          &:last-child {
            margin-bottom: 0px;
          }
        }
      }
    }

    .showVideoBox {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      // 视频
      video {
        width: 60%;
        height: 70%;
        background: rgba(0, 0, 0, 0.9);
      }
    }
  }
}
</style>

相关文章