vue3在线预览\下载 .docx文档--docx-preview

1、安装docx-preview插件

npm i docx-preview --save

2、引入docx-preview

import { renderAsync } from "docx-preview";

3、html结构

    <el-dialog v-model="dialogVisibleReport" :title="reportName" width="60%" top="2vh">
        <div id="reportContainer"></div>
    </el-dialog>

4、在线预览查看报告，后端返回的blob流文件

const fnViewReport = async (path: string, name: string) => {
    reportName.value = name;
    dialogVisibleReport.value = true;

    let params = {
        path: path
    }
    // blob流文件
    let res = await viewOnline(params)
    let reportContainer = document.getElementById("reportContainer");
    renderAsync(
        res,
        reportContainer, // HTMLElement 渲染文档内容的元素,
        null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 reportContainer。
    ).then(res => {
        console.log("res---->", res)
    })
};

5、下载报告

// 下载报告
const fnDownReport = async (path: string, name: string) => {
    let params = {
        path: path
    }
    let res = await viewOnline(params)
    // console.log(res); // 后端返回的是流文件
    const blob = new Blob([res]); // 把得到的结果用流对象转一下
    var a = document.createElement("a"); //创建一个<a></a>标签
    a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
    a.download = `${name}报告.docx`; //设置文件名
    a.style.display = "none"; // 障眼法藏起来a标签
    document.body.appendChild(a); // 将a标签追加到文档对象中
    a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
    a.remove(); // 一次性的，用完就删除a标签
};

6、查看报告去灰边

:deep(.docx-wrapper) {
    background-color: #fff; //设置灰边
}