Mammoth.js：将.docx 文件转换成HTML，从后台获取的文件流数据信息

xyxianyn

已于 2024-05-08 15:10:18 修改

阅读量1.2k

点赞数 3

文章标签： javascript html 前端 vue.js

于 2024-05-07 09:10:54 首次发布

本文链接：https://blog.csdn.net/xiyuanxian/article/details/138518716

版权

1、图片和pdf文件可以直接在页面中预览

使用iframe src：后台返回的文件地址或者请求文件流的接口地址直接预览

2、docx文件：

2、1 后台返回的是文件流：

<template>
 <div>
   <!--文件预览的模块-->
   <div v-html="vHtml"></div>
 </div>
</template>
<script>
import mammoth from 'mammoth' // mammoth的版本是1.7.2
</script>

fetch(url,{mode:'no-cors'})
.then((response) => response.blob())
.then((res)=>{
  const reader = new FileReader()
  reader.readAsArrayBuffer(res)
  reader.onload =  function(e){
    mammoth.covertToHtml({ arrayBuffer: e.target.result },
                         { includeDefaultStyleMap : true})
                            .then((result)=>{
                               let htmlInfo = result.value
                               //html样式的转化：此处可以根据实际情况进行设置
                               if(htmlInfo){
                                 let newHtml =  htmlInfo.replace(/<img /g,'<img style="max-width:90%;margin:20px auto"')
.replace(/<table/g,'<table style="border:1px solid #ddd"')
  this.vHtml = newHtml
                               }
                             })
  }
})

3、可以参考其他的文章信息

https://blog.csdn.net/xilejie/article/details/103304391

设置展示的文本样式信息 https://www.5axxw.com/questions/simple/9h8m7s