【VUE】 文件预览

【VUE】 文件预览

上传前预览

word文档：docx、doc

核心代码

import {renderAsync} from "docx-preview";
/**
* 渲染docx
* @param buffer
*/
docxRender(buffer) {
    let docxContainer = this.$refs.docxContainer;
    renderAsync(
    buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
    docxContainer, // HTMLElement 渲染文档内容的元素,
    null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 。
    this.docxOptions // 配置
    ).then(res => {
    console.log("res---->", res)
    })
}

源文件

预览文件

Excel表格：xls、xlsx

暂未开发，待后续更新

PowerPoint: ppt

暂未开发，待后续更新

PDF

暂未开发，待后续更新

照片 ：jpg、png、gif

核心代码

let fr = new FileReader();
fr.readAsArrayBuffer(this.file.raw);
fr.addEventListener("loadend", (e) => {
  let buffer = e.target.result;
  const bufferUrl = btoa(new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), ''));
  const imgUrl = 'data:image/png;base64,' + bufferUrl;
  that.$refs.imgContainer.src = imgUrl;
}, false);

预览文件

文本文件： txt

核心代码

const blob = new Blob([this.file.raw], {type: "text/html"})
const reader = new FileReader();
reader.onload = (ev) => {
  const content = ev.target.result
  that.$refs.textContainer.innerHTML = content;
}
reader.readAsText(blob);

预览文件

视频 mp4

核心代码

const blob = new Blob([this.file.raw], {type: 'video/mp4'})
const reader = new FileReader();
reader.onload = (ev) => {
    const src = ev.target.result
    that.$refs.mediaContainer.src = src;
}
reader.readAsDataURL(blob);

预览文件

暂不支持格式 :zip、rar 等等

上传预览代码

传送门：文件上传前预览代码