vue+docx-preview实现word文档下载及预览

1. 安装依赖

   yarn add docx-preview || npm install docx-preview -S

2. 引入

   import { renderAsync } from 'docx-preview'
   

3. 详细代码

           <div ref="childRef" class="childRef"></div>
           <a :href="src" download="" class="download">下载</a>

   data(){
       return{
           src: '文档地址',
       }
   }，
   methods:{
      schemeGeneration() {
         axios({
           methods: 'get',
           responseType: 'blob',
           url: this.src,
         })
           .then(({ data }) => {
             let childRef = document.getElementsByClassName('childRef')
             //用docx-preview渲染
             renderAsync(data, childRef[0]).then((res) => {
               console.log(res)
             })
   
           })
           .catch((e) => {
             console.log(e)
           })
       },
   }

   :deep(.docx-wrapper) {
     background-color: #fff;
     padding: 20px;
   }
   :deep(.docx-wrapper > section.docx) {
     width: 100% !important;
     padding: 0rem !important;
     min-height: auto !important;
     box-shadow: none;
     margin-bottom: 0;
   }

4. 效果展示