文本,docxView在线预览docx文件(Word)

简介: 文本,docxView在线预览docx文件(Word)

常见文件的在线预览

46-1在线浏览docx_哔哩哔哩_bilibili

本文转载于B站大佬:王清江哊,感谢大佬的分享 ^_^:

第一步:引依赖,如下

npm i docx-preview

第二步:查询测试图片上传列表

 
import request from '@/utils/request'
 
// 查询测试图片上传列表
export function getWord(url) {
  return request({
    url: url,
    responseType: 'blob',
    method: 'get',
  })
}

第三步 写一个testWord的Vue文件

 
<template>
  <div class="docWrapAndRoll">
    <div ref="file"></div>
  </div>
</template>
 
<script>
import {getWord} from "@/api/gzh/online";
 
const docx = require('docx-preview');
export default {
  name: "testWord",
  mounted() {
    getWord('http://wangqingjiang.top/prod-api/profile/upload/2022/09/26/2017015222-%E6%96%B9%E6%81%92_20220926195700A002.docx')
      .then((data) => {
        docx.renderAsync(data, this.$refs.file)
      })
  }
}
</script>
 
<style scoped>
.docWrapAndRoll {
}
</style>

第四步 把testWorld路由复制过去:

第五步:

第六步,我们要写一个路由,我们要跳去他,路由写好了跳转

 
  {
    path: '/testWord',
    component: () => import('@/views/testWord'),
    hidden: true
  },

这里访问是成功的,能显示出数据

写活的方法,从路由参数中拿到URL

const whiteList = ['/login', "/callback", '/auth-redirect', '/bind', '/register', '/testWord']

能够写活的方法

 
<template>
  <div class="docWrapAndRoll">
    <div ref="file"></div>
  </div>
</template>
 
<script>
import {getWord} from "@/api/gzh/online";
 
const docx = require('docx-preview');
export default {
  name: "testWord",
  mounted() {
    console.log();
    if (this.$route.query.url == null || this.$route.query.url === '') {
      this.$message.error("请传入URL!!")
    }
    getWord(this.$route.query.url)
      .then((data) => {
        docx.renderAsync(data, this.$refs.file)
      })
      .catch(e => {
        this.$message.error("URL存在问题,请检查!")
      })
  }
}
</script>
 
<style scoped>
.docWrapAndRoll {
}
</style>
相关文章
|
XML 数据格式 API
Word-docx文件图片信息格式分析
本文为笔记、仅作参考。 前文为: 用FreeMarker生成Word文档。 现在新需求来了,导出的Word文档中、需要包含图片。 大致的处理流程为: 解析导出信息、将 抽取出来。
2322 0
iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
|
.NET 开发框架 数据库
Word/Excel 在线预览
前言 近日项目中做到一个功能,需要上传附件后能够在线预览。之前也没做过这类似的,于是乎就查找了相关资料,.net实现Office文件预览大概有这几种方式:  ① 使用Microsoft的Office组件将文件直接转换为html文件(优点:代码实现最简单,工作强度最小。
2996 0
|
前端开发 JavaScript
前端实现文件预览(pdf、excel、word、图片)
前端实现文件预览(pdf、excel、word、图片)
408 0
|
9月前
aspose实现word,excel等文件预览
aspose实现word,excel等文件预览
|
JavaScript 前端开发 API
Docverter – 文本文件轻松转换为 PDF,Docx 和 ePub 文件
  Docverter 让你无需建立自己的文档转换工具就能够进行文件转换。Docverter 包装了几个开源项目,使您的文档能够进行完美的转换。借助一个简单的 HTTP API ,把使用 HTML,Markdown, 或者 LaTeX 编写的纯文本文件转换为 DOCX,PDF,RTF 和 ePub 格式文件。
1598 0
|
9月前
docx设置保存的word文档字体及大小
一般我是要将文件保存为这种形式我会使用
136 0

热门文章

最新文章