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

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

抱歉,您遇到了 "Error converting DOCX to HTML: Error: Could not find file in options" 的错误。这个错误通常是由于未正确设置文件路径或选项参数导致的。 请确保您在代码中正确设置了 DOCX 文件的路径。您可以使用绝对路径或相对于项目根目录的路径。例如,如果您的 DOCX 文件位于项目根目录下的 `docs` 文件夹中,可以将路径设置为 `'./docs/your-file.docx'`。 此外,还要确保您正确传递了选项参数。`mammoth.convertToHtml` 方法接受一个选项对象作为第二个参数。您可以在选项对象中设置一些参数,例如指定要使用的样式文件等。如果不需要额外的选项,可以省略该参数。 以下是一个示例,演示如何使用 `mammoth.js` 在 Vue 组件中将 DOCX 文件转换为 HTML: ```html <template> <div> <div v-html="renderedHtml"></div> </div> </template> <script> import mammoth from 'mammoth' export default { data() { return { renderedHtml: '' } }, mounted() { const docxFilePath = './path/to/your/docx/file.docx' const options = {} // 可选的选项参数 mammoth.convertToHtml({ path: docxFilePath }, options) .then((result) => { this.renderedHtml = result.value }) .catch((error) => { console.error(`Error converting DOCX to HTML: ${error}`) }) } } </script> <style> /* 在这里添加您的样式 */ </style> ``` 请确保将路径 `'./path/to/your/docx/file.docx'` 替换为实际的 DOCX 文件路径,并根据需要设置选项参数。 如果问题仍然存在,请检查文件路径和选项参数是否正确,并确保您的 DOCX 文件可访问。 希望这次回答对您有所帮助。如果您有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值