前端docx文件阅览

1. 下载 npm install docx-preview -S

 

2.

 <el-button @click="lookDocx">文件阅览</el-button>

      <div class="docWrap">
         <div ref="file"></div>
      </div>


import axios from 'axios';
let docx = require('docx-preview');

   lookDocx(){
       axios({
        method: 'get',
        responseType: 'blob', // 因为是流文件，所以要指定blob类型
        url: '/pyapi/shop/tools/select-order-template' // 一个word下载文件的接口
      }).then((data) => {
        console.log(data) // 后端返回的是流文件
        /**
		* 第一个参数： data为文件流，Blob | ArrayBuffer | Uint8Array 格式
		* 第二个参数： 渲染到页面的dom元素
		* 第三个参数： 渲染word文档的样式的元素，如果为null，则设置到第二个参数的DOM上
		* 第四个参数： 配置对象
		*/
		docx.renderAsync(data, this.$refs.file, null, {
		  	className: 'text-docx', //class name/prefix for default and document style classes
		   	inWrapper: true, //enables rendering of wrapper around document content
		   	ignoreWidth: false, //disables rendering width of page
		   	ignoreHeight: false, //disables rendering height of page
		   	ignoreFonts: false, //disables fonts rendering
		   	breakPages: true, //enables page breaking on page breaks
		   	ignoreLastRenderedPageBreak: true, //disables page breaking on lastRenderedPageBreak elements
		   	experimental: true, //enables experimental features (tab stops calculation)
		   	trimXmlDeclaration: true, //if true, xml declaration will be removed from xml documents before parsing
		   	useBase64URL: false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
		   	useMathMLPolyfill: true, //includes MathML polyfills for chrome, edge, etc.
		   	debug: false //enables additional logging
		 }) // 渲染到页面
      })
    }