前端OFD文件预览(vue案例cafe-ofd)
0、提示
下面只有vue的使用示例demo ,官文档参考 cafe-ofd - npm
其他平台可以参考 ofd - npm
官方线上demo: ofd
1、安装包
npm install cafe-ofd --save
2、引入
import cafeOfd from 'cafe-ofd'
import 'cafe-ofd/package/index.css'
Vue.use(cafeOfd)
3、使用案例(借助了element的组件可以替换其他)
<template><div style="padding: 20px 100px; font-size: 20px"><h1>ofd文件预览</h1><h1>https://www.npmjs.com/package/cafe-ofd</h1><h1>npm install cafe-ofd --save</h1><h1>import cafeOfd from 'cafe-ofd' <br>import 'cafe-ofd/package/index.css'<br>Vue.use(cafeOfd)</h1><el-uploadclass="upload-demo"ref="upload"action="":on-preview="handlePreview":file-list="fileList":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button></el-upload><div style="width: 100%; height: 60vh; border: 1px solid red; background-color:#ccc;" id="easyofd"><cafe-ofd ref="ofd" :filePath="file" @on-success="load" @on-scroll="scroll"><div slot="header"><input type="file" ref="file" class="hidden" placeholder="选择文件" accept=".ofd" @change="fileChanged"></div><div slot="footer" class="footer"><el-button @click="plus">放大</el-button><el-button @click="minus">缩小</el-button><el-button @click="pre" :disabled="currentNum <= 1">上一页</el-button><el-input type="number" :min="1" :max="pageNum" v-model.number="currentNum" @change="pageChange(currentNum)"></el-input><el-button @click="next" :disabled="currentNum >= pageNum">下一页</el-button><el-button @click="print">打印</el-button></div></cafe-ofd></div></div></template><script>
export default {data(){return {fileList: [],currentNum: null,file: null,pageNum: null}},mounted() {},methods: {handlePreview(e){this.file = e.raw},load(val) {this.pageNum = val;},fileChanged() {this.file = this.$refs.file.files[0];},plus() {this.$refs.ofd.scale(1.1);},minus() {this.$refs.ofd.scale(-0.9);},next() {this.$refs.ofd.nextPage();},pre() {this.$refs.ofd.prePage();},pageChange(val) {this.$refs.ofd.goToPage(val);},print() {this.$refs.ofd.printFile();},scroll(val) {this.currentNum = val;}}
}
</script><style scoped>
.footer {padding: 0 20px;display: flex;justify-content: space-between;gap: 20px;
}
@media print {html,body,#app {height: auto;overflow: auto;}
}
</style>
4、案例-图示
相关文章:
前端OFD文件预览(vue案例cafe-ofd)
0、提示 下面只有vue的使用示例demo ,官文档参考 cafe-ofd - npm 其他平台可以参考 ofd - npm 官方线上demo: ofd 1、安装包 npm install cafe-ofd --save 2、引入 import cafeOfd from cafe-ofd import cafe-ofd/package/index.css Vue.use(cafeOfd) 3、使…...
Java[list/set]通用遍历方法之Iterator
需求:输入一个字符串 将其拆解成单个汉字 然后一行一个输出 这里要求使用到Arraylist集合实现方法Itrator遍历的原理import java.util.ArrayList; import java.util.Collection; import java.util.Iterator;public class Main{public static void main(String[] arg…...
ubuntu/vscode下的c/c++开发之-CMake语法与练习
Cmake学习 1 语法特性介绍 基本语法格式:指令(参数 1 参数 2...) 参数使用括弧括起参数之间使用空格或分号分开 指令是大小写无关的,参数和变量是大小写相关的 set(HELLO hello.cpp) add_executable(hello main.cpp hello.cpp) ADD_EXECUTABLE(hello ma…...
Java(119):ExcelUtil工具类(org.apache.poi读取和写入Excel)
ExcelUtil工具类(XSSFWorkbook读取和写入Excel),入参和出参都是:List<Map<String,Object>> 一、读取Excel testdata.xlsx 1、new XSSFWorkbook对象 File file = new File(filePath); FileInputStream fis = new FileInputStream(file);…...
Kong处理web服务跨域
前言 好久没写文章了,大概有半年多了,这半年故事太多,本文写不下,就写写文章标题问题! 问题描述 关于跨域的本质问题我这里不过多介绍,详细请看历史文章 跨域产生的原因以及常见的解决方案。 我这边是新…...
Kotlin学习——kt里的作用域函数scope function,let,run,with,apply,also
Kotlin 是一门现代但已成熟的编程语言,旨在让开发人员更幸福快乐。 它简洁、安全、可与 Java 及其他语言互操作,并提供了多种方式在多个平台间复用代码,以实现高效编程。 https://play.kotlinlang.org/byExample/01_introduction/02_Functio…...
informer辅助笔记:utils/timefeatures.py
定义了一套与时间特征相关的类和函数,旨在从时间序列数据中提取有用的时间特征,以支持各种时间序列分析和预测任务 from typing import Listimport numpy as np import pandas as pd from pandas.tseries import offsets from pandas.tseries.frequenc…...
[Verilog语法]:===和!==运算符使用注意事项
[Verilog语法]:和!运算符使用注意事项 1, 和 !运算符使用注意事项2,3, 1, 和 !运算符使用注意事项 参考文献: 1,[SystemVerilog语法拾遗] 和!运算符使用注意事项 2, 3,...
mybatis 高并发查询性能问题
场景: 使用Mybatis (3.5.10)SelectProvider注解执行动态sql 在高并发查询时 QPS 很低 问题复现 mybatis 配置 (getOfflineConfigSqlTemplate 该方法返回的是动态sql ) 压测结果 观察线程阻塞情况 此时的QPS 在 …...
我在Vscode学OpenCV 图像处理一(阈值处理、形态学操作【连通性,腐蚀和膨胀,开闭运算,礼帽和黑帽,内核】)
文章目录 一、阈值处理1.1 OpenCV 提供了函数 cv2.threshold()和函数 cv2.adaptiveThreshold(),用于实现阈值处理1.1.1. cv2.threshold():(1)在函数cv2.threshold()中,参数threshold_type用于指定阈值处理的方式。它有以下几种可选的阈值类型…...
Yolov8实现瓶盖正反面检测
一、模型介绍 模型基于 yolov8n数据集采用SKU-110k,这数据集太大了十几个 G,所以只训练了 10 轮左右就拿来微调了 基于原木数据微调:训练 200 轮的效果 10 轮SKU-110k 20 轮原木 200 轮瓶盖正反面 微调模型下载地址https://wwxd.lanzouu.co…...
GAN:WGAN前作
WGAN前作:有原则的方法来训练GANs 论文:https://arxiv.org/abs/1701.04862 发表:ICLR 2017 本文是wgan三部曲的第一部。文中并没有引入新的算法,而是标是朝着完全理解生成对抗网络的训练动态过程迈进理论性的一步。 文中基本是…...
数据库应用:MongoDB 文档与索引管理
目录 一、理论 1.MongoDB文档管理 2.MongoDB索引管理 二、实验 1.MongoDB文档管理 2.MongoDB索引管理(索引添加与删除) 3.MongoDB索引管理(全文索引) 4.MongoDB索引管理(多列索引) 5.MongoDB索引管…...
Python批处理PDF文件,PDF附件轻松批量提取
PDF附件是指在PDF文档中嵌入的其他文件,如图像、表格、音频、视频或其他文档。这些附件可以与PDF文档一起存储、传输和共享,为文档提供了更丰富的内容和更多的功能。通过添加附件,我们可以将相关文件和信息捆绑在一起,使其更易于管…...
Python可迭代对象排序:深入排序算法与定制排序
更多Python学习内容:ipengtao.com 排序在计算机科学中是一项基础而关键的操作,而Python提供了强大的排序工具来满足不同场景下的排序需求。本文将深入探讨Python中对可迭代对象进行排序的方法,涵盖基础排序算法、sorted函数的应用、以及定制排…...
基于matlab的图像去噪算法设计与实现
摘 要 随着我们生活水平的提高,科技产品飞速更新换代,在信息传输中,图像传输所占的比重越来越大。但自然噪声会在图像传输时干扰其传输过程,甚至会使图片不能表达其原来的意义。去噪处理就是为了去除图像中的噪声,从而…...
NFTScan 正式上线 Starknet NFTScan 浏览器和 NFT API 数据服务
2023 年 11 月 30 号,NFTScan 团队正式对外发布了 Starknet NFTScan 浏览器,将为 Starknet 生态的 NFT 开发者和用户提供简洁高效的 NFT 数据搜索查询服务。NFTScan 作为全球领先的 NFT 数据基础设施服务商,Starknet 是继 Bitcoin、Ethereum、…...
2023年亚太杯APMCM数学建模大赛A题水果采摘机器人的图像识别
2023年亚太杯APMCM数学建模大赛 A题 水果采摘机器人的图像识别 原题再现 中国是世界上最大的苹果生产国,年产量约3500万吨。同时,中国也是世界上最大的苹果出口国,世界上每两个苹果中就有一个是中国出口的,世界上超过六分之一的…...
mysql which is not in SELECT list; this is incompatible with DISTINCT解决方案
mysql报错Expression #1 of ORDER BY clause is not in SELECT list, references column ‘xxx’ which is not in SELECT list; this is incompatible with DISTINCT解决方案: 这是在 mysql5.7 版本,DISTINCT 与 order by 在一起用时则会报3065错误。因…...
linux /proc 文件系统
/proc系统是一个伪文件系统,它只存在内存当中,而不占用外存空间,以文件系统的方式为内核与进程提供通信的接口。 /proc目录下有很多以数字命名的目录,每个数字代表进程号PID它们是进程目录。系统中当前运行的每一个进程在/proc下都…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
day36-多路IO复用
一、基本概念 (服务器多客户端模型) 定义:单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用:应用程序通常需要处理来自多条事件流中的事件,比如我现在用的电脑,需要同时处理键盘鼠标…...
毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态
前言 在人工智能技术飞速发展的今天,深度学习与大模型技术已成为推动行业变革的核心驱动力,而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心,系统性地呈现了两部深度技术著作的精华:…...
渗透实战PortSwigger靶场:lab13存储型DOM XSS详解
进来是需要留言的,先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码,输入的<>当成字符串处理回显到页面中,看来只是把用户输…...
Visual Studio Code 扩展
Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后,命令 changeCase.commands 可预览转换效果 EmmyLua…...
