uniapp打开docx文件方法

1.安装

npm install docx-preview 

npm install  alloyfinger

2.完整代码如下

获取onLoad()中options参数的文档地址，赋值值给url

<template>
  <div class="main" ref='main'>
    <div class="word" :style="{ transform: `scale(${w})` }">
      <div id="bodyContainer" ref="wordDiv"
        :style="{ 'transform': 'translate(' + posX + 'px,' + posY + 'px) translateZ(0px) scale(' + dis + ')' }"></div>
    </div>
  </div>
</template>
 
<script>
import { renderAsync } from "docx-preview";
import AlloyFinger from 'alloyfinger';
var initScale = 1;
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：启用额外的日志记录
      },
      style: {
 
      },
      w: 0,
      url: null,
      posX: 0,
      posY: 0,
      dis: 1,
    }
  },
  onLoad(options) {
	  console.log('asd',options.url)
     this.url = options.url
 
 
  },
  mounted() {
    if (this.url) {
      this.getFileFromUrl(this.url, 'word').then(res => {
        console.log(res)
        this.docxRender(res)
      })
      this.setScale()
      window.onresize = this.Debounce(this.setScale, 1000)
      this.setScale2()
    }
  },
  methods: {
    setScale2() {
      let speed = 1.5
      let min = .5
      new AlloyFinger(this.$refs.main, {
        pinch: (evt) => {
          console.log("实现缩放");
          this.dis = initScale * evt.zoom;
          if (this.dis < 1) this.dis = 1
        },
        pressMove: (evt) => {
          this.posX += evt.deltaX * speed;
          this.posY += evt.deltaY * speed;
        },
        multipointEnd: () => {
          initScale = this.dis;
        }
      })
    },
    docxRender(buffer) {
      let bodyContainer = document.getElementById("bodyContainer");
      renderAsync(
        buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
        bodyContainer, // HTMLElement 渲染文档内容的元素,
        null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
        this.docxOptions // 配置
      ).then(res => {
        console.log(res.data)
      })
    },
    getFileFromUrl(url, fileName) {
      return new Promise((resolve, reject) => {
        var blob = null;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.setRequestHeader('Accept', 'image/png');
        xhr.responseType = "blob";
        // 加载时处理
        xhr.onload = () => {
          // 获取返回结果
          blob = xhr.response;
          let file = new File([blob], fileName, { type: 'image/png' });
          // 返回结果
          resolve(file);
        };
        xhr.onerror = (e) => {
          reject(e)
        };
        // 发送
        xhr.send();
      });
    },
    setScale() {
      setTimeout(() => {
        let bodyContainer = document.getElementById("bodyContainer");
        // this.w =window.innerWidth / bodyContainer.offsetWidth
        this.w = window.innerWidth < 768 ? window.innerWidth / 768 : window.innerWidth / bodyContainer.offsetWidth
 
        // this.style = {
        //   transform: `scale(${w})`
        // }
      }, 200)
    },
    Debounce(fn, t) {
      const delay = t || 500
      let timer
      return function () {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          console.log(this.w, window.innerWidth, document.getElementById("bodyContainer").offsetWidth);
 
          fn.apply(context, args)
        }, delay)
      }
    },
  }
}
</script>
<style>
uni-page-body {
  background-color: white !important;
}
</style>
<style scoped>
.word {
  transform: scale(0.6);
  transform-origin: top center;
  transition: transform 0.4s;
}
</style>复制