vue实现预览word文档（处理文档流）

效果图如下：

1、需要用到插件

npm i docx-preview --save

页面实现预览主要依靠插件，所以这是最重要的一步，如果你用的cnpm包管理器，那就是命令行

cnpm i docx-preview --save

2、引入var docxx = require("docx-preview");

3、调取接口，获得后端传回的文档流，这里的res.data.data就是文档流，并调用docx-previre的方法渲染文件到页面。

4、结束，代码如下：

<template><div><el-button @click="createpsbgDoc">报告</el-button><div ref="word" class="docWrap"></div></div>
</template>
<script>
import {createpsbgDoc,
} from "_b/api/results.js";
var docxx = require("docx-preview");
export default {
methods:{createpsbgDoc() {createpsbgDoc()//调接口.then((res) => {docxx.renderAsync(res.data.data, this.$refs.word);}).catch((error) => {this.$message({type: "error",message: error,});});},
}
}
</script>

"_b/api/results.js"内容如下，就是调的接口，axios

import request from '@/router/axios';export const createpsbgDoc = (projectId) => {return request({url:'/abc/ccccc/aaaaaaa',  //后端接口method: 'get',params: {projectId   //请求参数},})}

5、通过文档流在vue页面实现下载文档，还在实践中

vue实现预览word文档（处理文档流）相关推荐

vue在线预览word，pdf， xls，ppt 文档
首先先踩坑(也不算坑,只是跟我的需求不匹配) 一 ,官方渠道使用微软提供的Office Online平台只需要一个网址即可在线查看Xls,doc,PPT等文档 http://view.officea ...
java实现在线预览word，excel,ppt文档
项目中遇到的word文档在线预览需求,查阅很多资料决定利用openoffice转换word文档为pdf进行预览实现. 1.下载openoffice4安装 www.openoffice.org: 2.导 ...
vue 在线预览word文件docx
1.npm安装插件 npm i docx-preview 2.index.html文件引入 <script src="https://unpkg.com/jszip/dist/jszi ...
【学习记录20】vue使用blob流预览word ，Excel，pdf，TXT，图片，视频
TXT,PDF直接使用浏览器本身预览 excel使用插件 xlsx,这个插件需要用到arraybuffer的流格式,我是使用前端转换的详见js代码,也可以叫后台返回arraybuffer的数据流 wo ...
Vue 预览word,excel,ppt等office文档-内网访问（基于onlyoffice，后端返回文件流）
Vue 预览word,excel等office 先看效果!! 需求背景:在前端页面中预览office文件且是内网访问,服务器不可访问外网的前提. 因此微软的接口就废掉了,因为他接口的条件是可以访问外网 ...
html画布显示PPT,【Web前端问题】有没有办法让HTML5 canvas显示/预览word/excel/powerpoint 文档？...
目前想实现类似百度文库那样的在线文档预览,但是他们使用的一般都是Flash,而HTML5 canvas可以在大多数情况下代替Flash,那么有没有办法让canvas显示/预览Office文档? 如果不 ...
在线预览word文档
在线预览word文档在线预览word文档 Java 使用wps将word文件转换pdf文件转成PDF 在线预览word(转成pdf)前端展示欢迎来提更好的意见在线预览word文档昨天下午组长 ...
前端网页预览word,pdf,excel等各类文档
项目中有需求要在网页上预览word文档,但是使用a标签的话只能预览图片一类的文件,对word只会下载文档不能预览在网上查了很多资料,有些方法只能支持ie(使用ActiveXObject) 终于发现有 ...
Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等
前言 PDF.TXT 只要资源可访问,根本就不需要进行任何处理,直接访问查看就完事了. 也是因为这个PDF可以直接查看(现在浏览器基本支持了),那么我们实现Word文档在线预览,其实也是把WORD文 ...

vue实现预览word文档（处理文档流）

vue实现预览word文档（处理文档流）相关推荐

最新文章

热门文章