1.点击预览按钮,路由携带url传参跳转到预览页面,同时对url值进行加密处理encodeURIComponent(url)[代码中我用的使base64插件,两者都可]
2.created函数中,window.location.href获取当前浏览器地址,截取到加密的url值,然后进行解密decodeURIComponent(url)。
注意:可能会遇到加密编码为=,系统会自动转换为%3D,这样的话就无法解密成功,这里一定要做一下处理
3.定义一个div,设置id名,预览解析后的docx,
4.安装docx-preview插件。npm i docx-preview --save
只能在线预览后缀名是docx后缀的文件,doc不可以
5.将接收到的url发送网络请求,url格式是:http://xxx.xx.x.xxx:xxxx/文档名称.docx
6.成功后将res.data进行传入,加载、渲染,如果有下载需求的,也可以进行下载
最终代码如下:
router.js
import Router from "vue-router";
import Vue from "vue";
import preview from "../pages/preview.vue";
import home from "../pages/home.vue";
export const constantRouterMap = [
{
path: "/preview",
name: "preview",
component: preview,
},
{
path: "/home",
name: "home",
component: home,
},
{
path: "*",
redirect: "/home",
},
];
/**
* 配置路由
**/
const router = new Router({
mode: "history",
routes: [...constantRouterMap],
});
export default router;
home.vue
<template>
<div class="docx-preview-wrap">
<button @click="preview()">预览</button>
</div>
</template>
<script>
export default {
name: "DocxPreview",
data() {
return {
};
},
created() {},
methods: {
preview() {
let enUrl = this.$Base64.encode('http://172.16.1.15:8025/demo/hey.docx');
this.$router.push("/preview" + "?url=" + enUrl);
},
},
};
</script>
preview.vue
<template>
<div>
<div id="bodyContainer"></div>
</div>
</template>
<script>
import { renderAsync } from "docx-preview";
import { downloadFile } from "../config/config";
export default {
data() {
return {
docxOptions: {
className: "kaimo-docx-666", // string:默认和文档样式类的类名/前缀
inWrapper: true, // boolean:启用围绕文档内容的包装器渲染
ignoreWidth: false, // boolean:禁用页面的渲染宽度
ignoreHeight: false, // boolean:禁止渲染页面高度
ignoreFonts: false, // boolean:禁用字体渲染
breakPages: true, // boolean:在分页符上启用分页
ignoreLastRenderedPageBreak: true, // boolean:在 lastRenderedPageBreak 元素上禁用分页
experimental: false, // boolean:启用实验功能(制表符停止计算)
trimXmlDeclaration: true, // boolean:如果为true,解析前会从 xml 文档中移除 xml 声明
useBase64URL: false, // boolean:如果为true,图片、字体等会转为base 64 URL,否则使用URL.createObjectURL
useMathMLPolyfill: false, // boolean:包括用于 chrome、edge 等的 MathML polyfill。
showChanges: false, // boolean:启用文档更改的实验性渲染(插入/删除)
debug: false, // boolean:启用额外的日志记录
},
file: "",
};
},
created() {
// 接收过来,解密
var a = window.location.href;
var urlList = a.split("=");
a = urlList[urlList.length - 1].split("%3D")[0];
a = a + "=";
console.log(a);
var url = this.$Base64.decode(a);
console.log(url);
this.getFileInfo(url);
},
mounted() {},
methods: {
async getFileInfo(docxurl) {
// 发送网络请求
await downloadFile(docxurl)
.then((res) => {
console.log(res);
this.file = res.data;
//下载文件
this.download();
this.handlePreview();
})
.catch((err) => {
console.log(err);
});
},
handlePreview() {
// 将file转为buffer
let fr = new FileReader();
fr.readAsArrayBuffer(this.file);
fr.addEventListener(
"loadend",
(e) => {
// console.log("loadend---->", e);
let buffer = e.target.result;
this.docxRender(buffer);
},
false
);
},
// 渲染docx
docxRender(buffer) {
let bodyContainer = document.getElementById("bodyContainer");
renderAsync(
buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
bodyContainer // HTMLElement 渲染文档内容的元素,
// null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null,则将使用 bodyContainer。
// this.docxOptions // 配置
).then((res) => {
// this.centerDialogVisible = false;
// console.log("res---->", res);
});
},
download() {
var a = document.createElement("a");
a.href = URL.createObjectURL(this.file);
// a.download = "123.docx";
a.style.display = "none";
document.body.appendChild(a);
a.click();
// a.remove();
},
},
};
</script>
<style scoped></style>
----------------------------------------end