vue使用插件docx-preview预览word文档

1.下载

npm i docx-preview --save

问题1：vue 2.6.12使用npm i docx-preview --save下载插件后引用'docx-preview'会报错；

应是版本不对应，使用npm i docx-preview@0.1 --save下载其他版本后成功引用了；

2.页面引用

import axios from 'axios';
import { renderAsync } from 'docx-preview';

3.页面元素

<div ref="filedoc"></div>

4.获取文件流并页面渲染

封装好的axios请求
    previewApi({ path }).then((res) => {
      // 后端给到的文件流类型不是下面的type，前端可进行转换；但是不转换也能渲染出来
      // let blob = new Blob([res.data], {
      // type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      // });
      renderAsync(res.data, filedoc.value);
    });
或者
   axios({
       method: 'get',
       responseType: 'blob', // 因为是流文件，所以要指定blob类型
       url: 'http://xxxxxx', // 提供的一个word下载文件接口
    }).then(({ data }) => {
       renderAsync(data, filedoc.value); // 渲染到页面
    });

问题2：获取到的文件流渲染不出来，一直报...is zip?...之类的。

需要源文件必须是.docx文件，刚开始使用.doc文件就报错

问题3：预览文件的位置并不是整个页面，文件宽度会超过区域

// 我是没找到docx自适应宽度之类的配置，就自行修改样式了
// 这里通过给外边框动态传递了缩小值来控制
<div :style="{ '--isScale': data.isScale }"></div>

:deep(.docx-wrapper) {
  background-color: #fff; //设置灰边
  padding: 0;
  transform: scale(var(--isScale));
  transform-origin: top; /* 改变基点到上 中 */
}


// 窗口变化动态计算
function handleResize() {
  let  scale =
      filedoc.value && filedoc.value.offsetWidth
        ? (filedoc.value.offsetWidth / (1.35 * 595.3)).toFixed(2)
        : 0.5;

  data.isScale = scale <= 1 ? scale : 1;
}