vue 实现在线预览word文档

使用插件:

docxx npm实现在线预览word文档
官网:npm参数

项目使用:

     reViewFile_2(){
          let body = {
          "distCodes": [],
          "startDate": "",
          "endDate": "",
          "county": ""
        }
        this.$axios({
          url: this.$main + "/******",
          method: "post",
          data: body,
          timeout: 180000,
          responseType: "blob",
        }).then((res) => {
          const blob = res.data;
          docxx.renderAsync(
          blob,   //文档流
          this.$refs.refWold, //挂载dom
          null,  //样式 
          { renderFooters:false } //不显示页脚 其他参数参考api
          );
        })
        .catch(() => {
          this.loading = false;
        });
      },
renderAsync(
    document: Blob | ArrayBuffer | Uint8Array, // could be any type that supported by JSZip.loadAsync
    bodyContainer: HTMLElement, //element to render document content,
    styleContainer: HTMLElement, //element to render document styles, numbeings, fonts. If null, bodyContainer will be used.
    options: {
        className: string = "docx", //class name/prefix for default and document style classes
        inWrapper: boolean = true, //enables rendering of wrapper around document content
        ignoreWidth: boolean = false, //disables rendering width of page
        ignoreHeight: boolean = false, //disables rendering height of page
        ignoreFonts: boolean = false, //disables fonts rendering
        breakPages: boolean = true, //enables page breaking on page breaks
        ignoreLastRenderedPageBreak: boolean = true, //disables page breaking on lastRenderedPageBreak elements
        experimental: boolean = false, //enables experimental features (tab stops calculation)
        trimXmlDeclaration: boolean = true, //if true, xml declaration will be removed from xml documents before parsing
        useBase64URL: boolean = false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
        useMathMLPolyfill: boolean = false, //@deprecated includes MathML polyfills for chrome, edge, etc.
        renderChanges: false, //enables experimental rendering of document changes (inserions/deletions)
        renderHeaders: true, //enables headers rendering
        renderFooters: true, //enables footers rendering
        renderFootnotes: true, //enables footnotes rendering
        renderEndnotes: true, //enables endnotes rendering
        debug: boolean = false, //enables additional logging
    }): Promise<any>

你可能感兴趣的:(vue.js,word,前端)