vue前端‘docx‘格式实现文件预览

#GZ

于 2022-12-20 15:31:27 发布

阅读量688

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/JINGZzhuo/article/details/128385503

本文介绍了如何在Vue项目中使用npm包docx-preview来实现实时加载和预览.docx文件，通过axios获取远程文档并渲染到页面上，适合前端开发者阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.npm安装插件

npm i docx-preview

2.代码

<template>
  <div>
    <div ref="word"></div>
      <span
          @click="contractShowed()"
        >预览合同</span>
  </div>
</template>

<script>
import Axios from "axios";
let docx = require('docx-preview'); //引入插件
export default {

  
  methods: {
    getPdfCode (url) { 
	    Axios ({
	      method: 'get',
	      responseType: 'blob', 
	      url: url,
	    }).then(({data}) => {
	      docx.renderAsync(data,this.$refs.word) // 渲染到页面
	    })
   },
   contractShowed(){
   this.getPdfCode('https:********.docx')
    }
}
</script>

注意：url为文档路径