vue前端下载文件docx-preview实现文件预览

最新推荐文章于 2025-02-21 09:22:45 发布

m0_67403013

最新推荐文章于 2025-02-21 09:22:45 发布

阅读量1.6k

点赞数

分类专栏：前端 html 文章标签：网络 tcp/ip vue.js

本文链接：https://blog.csdn.net/m0_67403013/article/details/123304521

版权

本文介绍了如何在Vue项目中实现.docx文件的预览和下载功能。通过npm安装特定插件，将插件引用到public/index.html，并在Vue组件中编写示例代码来完成操作。注意，博主仅测试了.docx文件，其他格式的文件可能需要额外处理，对于PDF文件，可以使用vue-pdf插件进行预览。

摘要由CSDN通过智能技术生成

一、文件下载

）：如果在下载过程中不需要其他骚操作的话’直接a标签’

<a :href="http://***文件下载地址" download="">下载</a>

二、文件预览

1.npm安装插件

）：此插件容易安装失败

npm i docx-preview
//此插件容易安装失败 安装了cnpm的小伙伴可使用
cnpm i docx-preview

2.public文件下index.html引入

<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

3.vue示例代码

<template>
  <div>
    <div ref="file"></div>
  </div>
</template>

<script>
import Axios from "axios";
import { Loading } from "element-ui";
let docx = require('docx-preview');
let loading;
export default {
  created() {
    loading = Loading.service({ //开始loading加载动画
      lock: true,