常见文件的在线预览
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>
