当前位置: 首页 > news >正文

前端文件预览汇总

一、vue中预览word、excel、pdf:

vue-office

vue-office支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3,也支持非Vue框架的预览。

特点:

一站式:提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档在线预览

简单:只需提供文档的src(网络地址、本地地址)即可完成文档预览

体验好:选择每个文档的最佳预览方案,保证用户体验和性能都达到最佳状态

性能好:针对数据量较大做了优化

安装

#docx文档预览
npm install @vue-office/docx#excel文档预览
npm install @vue-office/excel#pdf文档预览
npm install @vue-office/pdf

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

使用例子

文档预览场景大致分为两种:

1.网络地址/本地项目地址,比如 https://***.pdf

2.文件上传时预览,可以通过获取文件的ArrayBuffer或Blob

pdf文件预览

使用网络地址/本地项目地址

<template><div><vue-office-pdf:src="pdfUrl"style="height: 100vh"@rendered="renderedHandler"@error="errorHandler"/></div>
</template><script>
import VueOfficePdf from "@vue-office/pdf";
import "@vue-office/docx/lib/index.css";
export default {name: "PdfView",components: {VueOfficePdf,},data() {return {pdfUrl: "http://localhost:3000/test.pdf",};},mounted() {},methods: {renderedHandler() {console.log("渲染完成");},errorHandler() {console.log("渲染失败");},},
};
</script>
<style scoped>
</style>

相关文章:

前端文件预览汇总

一、vue中预览word、excel、pdf&#xff1a; vue-office vue-office支持多种文件(docx、excel、pdf)预览的vue组件库&#xff0c;支持vue2/3&#xff0c;也支持非Vue框架的预览。 特点&#xff1a; 一站式&#xff1a;提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档在线…...

银河麒麟V10 安装tigervncserver

银河麒麟V10 安装tigervncserver 银河麒麟V10安装tigervnc-server步骤&#xff1a; 提示&#xff0c;本安装环境&#xff1a;arm飞腾2000&#xff0c;主机开机进入root用户模式。 1、安装server安装包 #rpm -i tigervnc-server-1.10.1-5.p05.ky10.aarch64.rpm 2、控制台输入 …...

SKM Power*Tools 10.0

SKM Power*Tools 10.0是功能强大的电气电力系统分析设计解决方案&#xff01;综合软件提供强大的功能和领先的技术&#xff0c;在检查、计算、负载分配、流量、瞬态稳定性等多个方面提供领先的支持&#xff0c;可对不同的安全设备、系统进行评估分析和比较&#xff0c;使用 Pow…...

查看视频时间基 time_base

时间基、codec, 分辨率&#xff0c;音频和视频的都一样&#xff0c;才可以直接使用ffmpeg -f concat -i file.txt 方式合并。 On Thu, Dec 03, 2015 at 21:54:53 0200, redneb8888 wrote: I am looking for a way to find the time base of a stream (video or audio), $ ffpr…...

数据结构 —— 最小生成树

数据结构 —— 最小生成树 什么是最小生成树Kruskal算法Prim算法 今天我们来看一下最小生成树&#xff1a; 我们之前学习的遍历算法并没有考虑权值&#xff0c;仅仅就是遍历结点&#xff1a; 今天的最小生成树要满足几个条件&#xff1a; 考虑权值所有结点联通权值之和最小无环…...

初学Spring之 JavaConfig 实现配置

使用 Java 方式配置 Spring 写个实体类&#xff1a; Component 表示这个类被 Spring 接管了&#xff0c;注册到了容器中 package com.demo.pojo;import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component;Component //…...

在Java项目中实现实时日志分析

在Java项目中实现实时日志分析 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 随着互联网应用的发展&#xff0c;实时日志分析成为了保证系统稳定性、性能优化…...

Git基础知识与常用命令指南

这是一个Git基础知识和常用命令的简要指南,涵盖了日常开发中最常用的操作。你可以将这个指南保存下来,作为日常工作的参考。 目录 基础篇1. Git基本概念2. 配置Git3. 创建仓库4. 基本的工作流程5. 分支操作6. 查看历史7. 撤销更改8. 远程仓库操作 Git进阶知识与技巧指南1. 分…...

第8章:Electron 剪贴版和消息通知

在本章中&#xff0c;我们将介绍如何在Electron应用中与操作系统进行集成。这些操作包括剪贴板操作、通知系统、原生对话框等功能。 8.1 剪贴板操作 Electron 提供了 clipboard 模块&#xff0c;允许我们在应用中访问和操作剪贴板内容。以下是一些基本的剪贴板操作示例。 8.…...

Android zygote访谈录

戳蓝字“牛晓伟”关注我哦&#xff01; 用心坚持输出易读、有趣、有深度、高质量、体系化的技术文章&#xff0c;技术文章也可以有温度。 本文摘要 本文以访谈的方式来带大家了解zygote进程&#xff0c;了解zygote进程是啥&#xff1f;它的作用是啥&#xff1f;它是如何一步…...

nuxt、vue树形图d3.js

直接上代码 //安装 npm i d3 --save<template><div class"d3"><div :id"id" class"d3-content"></div></div> </template> <script> import * as d3 from "d3";export default {props: {d…...

香橙派AIpro测评:yolo8+usb鱼眼摄像头的Camera图像获取及识别

一、前言 近期收到了一块受到业界人士关注的开发板"香橙派AIpro",因为这块板子具有极高的性价比&#xff0c;同时还可以兼容ubuntu、安卓等多种操作系统&#xff0c;今天博主便要在一块832g的香橙派AI香橙派AIpro进行YoloV8s算法的部署并使用一个外接的鱼眼USB摄像头…...

大华设备接入GB28181视频汇聚管理平台EasyCVR安防监控系统的具体操作步骤

智慧城市/视频汇聚/安防监控平台EasyCVR兼容性强&#xff0c;支持多协议接入&#xff0c;包括国标GB/T 28181协议、GA/T 1400协议、部标JT808协议、RTMP、RTSP/Onvif协议、海康Ehome、海康SDK、大华SDK、华为SDK、宇视SDK、乐橙SDK、萤石云SDK等&#xff0c;并能对外分发RTMP、…...

Laravel包开发指南:构建可重用组件的艺术

标题&#xff1a;Laravel包开发指南&#xff1a;构建可重用组件的艺术 Laravel不仅是一个强大的Web应用框架&#xff0c;它的包&#xff08;Package&#xff09;系统也为开发者提供了构建和共享可重用组件的能力。通过包开发&#xff0c;开发者可以轻松地扩展Laravel的功能&am…...

JavaDS预备知识

集合框架 Java 集合框架 Java Collection Framework &#xff0c;又被称为容器 container &#xff0c;是定义在 java.util 包下的一组接口 interfaces和其实现类 classes 。 其主要表现为将多个元素 element 置于一个单元中&#xff0c;对数据进行创建(Create)、读取(Retrieve…...

日常学习--20240705

1、IO流 按照IO操作的数据类型分为字节流和字符流&#xff1a; 字节流&#xff1a;又分为输入流&#xff08;其他程序传递过来的数据&#xff0c;读取流中的数据&#xff09;和输出流&#xff08;往流中写数据&#xff0c;传递给其他程序&#xff09;;可以操作二进制文件&…...

Java中初始化一个List的多种方式

1.最原始的方式&#xff1a;先创建&#xff0c;然后再添加元素 List<String> list new ArrayList<>(); list.add("apple"); list.add("banana"); list.add("cherry");2.使用Arrays.asList 这是一种快速方便的方式&#xff0c;直接…...

BeikeShop多国语言多货币商城系统源码基于Laravel框架

BeikeShop是基于 Laravel 开发的一款开源商城系统&#xff0c;支持多语言商城 多货币商城 100%全开源 ChatGPT OpenAI B2C商城系统 H5商城 PHP商城系统 商城源码 PC商城 跨境电商系统 跨境商城系统 电商商城系统 Laravel 10 框架开发系统&#xff0c;支持插件市场。 Event 机制…...

gradle构建工具

setting.gradle // settings.gradle rootProject.name my-project // 指定根项目名称include subproject1, subproject2 // 指定子项目名称&#xff0c;可选jar包名称 方式一 jar {archiveBaseName my-application // 设置 JAR 文件的基本名称archiveVersion 1.0 // 设置…...

Java需要英语基础吗?

Java编程语言本身并不要求必须有很强的英语基础&#xff0c;因为Java的语法和逻辑是独立于任何特定语言的。我收集归类了一份嵌入式学习包&#xff0c;对于新手而言简直不要太棒&#xff0c;里面包括了新手各个时期的学习方向编程教学、问题视频讲解、毕设800套和语言类教学&am…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...