首页 前端知识 Mammoth.js:将.docx 文件转换成HTML,从后台获取的文件流数据信息

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

2024-07-21 00:07:54 前端知识 前端哥 795 817 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14102.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!