文本,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>
相关文章
iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
|
前端开发
前端如何支持PDF、Excel、Word在线预览 #42
前端如何支持PDF、Excel、Word在线预览 #42
662 0
|
前端开发 C#
C# 基于NPOI+Office COM组件 实现20行代码在线预览文档(word,excel,pdf,txt,png)
C# 基于NPOI+Office COM组件 实现20行代码在线预览文档(word,excel,pdf,txt,png)
|
9月前
docx设置保存的word文档字体及大小
一般我是要将文件保存为这种形式我会使用
142 0
word安装(ppt、excel),以及word的常用设置
word安装(ppt、excel),以及word的常用设置
123 0
|
前端开发 JavaScript
前端实现文件预览(pdf、excel、word、图片)
前端实现文件预览(pdf、excel、word、图片)
411 0
|
XML 前端开发 小程序
PDF转Word完全指南:3大方法满足各种场景!
还不知道PDF怎么转Word吗,本文将提供完整的PDF转Word方案,包括离线、在线或者SDK API等各种方式,总有一款满足您的需求。
886 0
|
iOS开发 MacOS Windows
将 PDF 转化为 Word 文件
将 PDF 转化为 Word 文件
342 0
|
安全
PDF转Word
PDF转Word
513 0
PDF转Word
|
Web App开发 XML Java
通过freemarker生成一个word,解决生成的word用wps打开有问题的问题,解决出word时中文文件名乱码问题,解决打开出word时打开的word出现问题的问题,出图片,解决动态列表
 通过freemarker制作word比较简单 步骤:制作word模板。制作方式是:将模板word保存成为xml----在xml的word模板中添加相应的标记----将xml的word文件的后缀名改成ftl文件(要注意的是生成xml格式要是2003格式的xml,也就是说拿到的word模板得是2003格式的,否则用wps打开word将会出现问题)   详细步骤如下: 模板制作(将要动态显示的
4697 0