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

  1. 安装依赖
    yarn add docx-preview || npm install docx-preview -S
  2. 引入
    import { renderAsync } from 'docx-preview'
    
  3. 详细代码
            
    下载
    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. 效果展示vue+docx-preview实现word文档下载及预览_第1张图片

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