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

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

2024-07-21 00:07:54 前端知识 前端哥 798 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
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

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