vue2 docx

2024-07-10 07:58| 来源: 网络整理| 查看: 265

不知大家是否有在线预览word文件的需求呢，使用docx-preview在线预览文件。

docx-preview 第一种方法命令下载 npm install docx-preview 或 yarn add docx-preview 第二种方法CDN引入

1. 在public文件 → 创建cdn文件夹 → 创建docx-preview文件夹 → 创建docx-preview.js（把以下地址内容复制到文件里）

网址：https://volodymyrbaydalka.github.io/docxjs//dist/docx-preview.js

2. 在index.html 引入以下

docx-preview：文档地址在线演示

完整代码

主要看 handlePreview 方法，我这边后端返回是url（仅供参考），大家根据自身项目更改；

{{text}} // import { renderAsync } from 'docx-preview' // 第一种 export default { props: { fileList: { type: Array, default: () => [], }, accept: { type: String, default: "", }, text: { type: String, default: "选取文件", }, limit: { type: Number, default: 1, }, exceedTip: { type: String, default: "请先移除已上传的文件，再上传新文件", }, }, components: {}, data() { return { previewVisible: false, }; }, methods: { handleChange(file, fileList) { this.$emit("update:fileList", fileList); }, handleRemove(file, fileList) { this.$emit("update:fileList", fileList); }, handlePreview(file) { const validExtensions = [".doc", ".docx"]; const fileName = file.src || file.raw.name; const fileExtension = fileName .substring(fileName.lastIndexOf(".")) .toLowerCase(); if (!validExtensions.includes(fileExtension)) return; // 以上是根据自身项目后端返回url的后缀限制打开预览，请大家根据自身项目更改 this.previewVisible = true; this.previewDocx(file); }, handleExceed() { this.$message.warning(this.exceedTip); }, async previewDocx(file) { try { let blob; if (file.raw) { blob = file.raw; // 本地预览 } else { // 后端返回我这边返回是url需转blob才能显示,若你们本身返回是blob直接赋值就好 const response = await fetch(file.src); blob = await response.blob(); } this.$nextTick(() => { // renderAsync(blob,this.$refs.previewContainer) // 第一种 window.docx.renderAsync(blob, this.$refs.previewContainer); // 第二种 }); } catch (error) { console.error("无法预览文件", error); } }, }, created() {}, beforeDestroy() {}, }; ::v-deep .el-upload-list { cursor: pointer; } 效果显示

后记：慢慢来，好戏都在烟火里

【本文地址】

公司简介

联系我们