docx文件新窗口预览

折季雨

已于 2024-05-24 10:35:20 修改

阅读量225

点赞数 7

文章标签： vue.js elementui javascript

于 2024-05-24 10:34:21 首次发布

本文链接：https://blog.csdn.net/2401_82730858/article/details/139168096

版权

需要借助docx-preview。doc文件暂时没有做出预览，用了好多工具都不行。

直接npm i docx-preview 然后在文件里引入就行了

// html 
<el-dialog v-model="wordViewShow" fullscreen title="Tips" width="90%" class="previewWrap">
        <div ref="bottom">
            <div class="my-component" ref="wordView" id="wordView"></div>
        </div>
    </el-dialog>
// js逻辑
// 定义
import { renderAsync } from "docx-preview";
const wordViewShow = ref(false)
// 逻辑
（这里做判断是因为还有pdf的预览）  url是后端返回的文件地址
const extName = url.slice(url.lastIndexOf('.'))
if (extName === '.docx') {
            axios({
                method: 'get',
                responseType: 'blob', // 设置响应文件格式
                url: 'http://localhost:8888' + url, // 前面加自己网址的前缀，如果是完整路径可以不加
            }).then(({ data }) => {
                // 在新标签页中打开 Blob 数据
                const newWindow = window.open();
                newWindow.document.write('<html><head><title>docx文件</title></head><body>');
                newWindow.document.write('<div id="preview-container"></div>'); // 在新页面中创建一个容器用于显示 Blob 数据
                newWindow.document.write('</body></html>');
                newWindow.document.close();
                // 将 Blob 数据渲染到新页面中
                const previewContainer = newWindow.document.getElementById('preview-container');
                renderAsync(data, previewContainer);
                // renderAsync(data, proxy.$refs.wordView) // 渲染到页面预览（本页面预览）
            })
        }

展示效果（打印可以用浏览器自带的）