【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
暂未开发，待后续更新
暂未开发，待后续更新
照片 ：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 等等
上传预览代码
传送门：文件上传前预览代码
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/197543.html
