CV工程师!!

Vue3 实现文件预览 Word Excel pdf 图片视频等格式大全!!!!

先上效果图

插件安装

先说 word 文件是docx-preview插件

excel文件是用 xlsx 插件

介绍后端返回的数据

因为在拦截器处做了对数据的处理最后你调接口拿到的数据是一个对象里面包含:

url : blob对象转换的用于访问Blob数据的临时链接。这个链接可以被用于在网页中展示二进制数据，比如显示图像或者播放音视频文件

blobs: 返回的Blob对象，代表了从网络请求中获取到的二进制数据

这上下俩部分很重要!!!!!!!!

如果返回的普通格式的话就大家直接转化

const blob = new Blob([res], { type: 'application/pdf' }) //你需要的类型转化为blob对象
const url = window.URL.createObjectURL(blob) //将对象转化为链接

也就是你后面掉接口返回的数据

给大家打印一下我当时在网上搜索这类资料的时候就是在这一部分弄糊涂了对数据格式不了解

然后就到正式书写了

下载引入插件 (我这是v3 引入 vue2版本 csdn官网上搜vue预览文件一大堆大家自己搜一下)

//word文档注释
import { renderAsync } from 'docx-preview';
//excel注释
import * as XLSX from "xlsx";

Word预览

不清楚result 返回内容的往上滑这里传递的是blob对象!!

 
  


     //js代码处
     const previewContainer = document.getElementById('fileShow');
            renderAsync(result.blob, previewContainer) //渲染

Excel预览

不清楚result 返回内容的往上滑这里传递的是blob对象!! 中间内容是在拿到数据渲染的时候插件数据处理最后将处理的数据当参数传递到处理样式的方法中



        
        
            
        
        
        
        
        


    


//js代码处

//表格预览所需数据 定义
const data = reactive({
    excel: {
        // 数据
        workbook: {},
        // 表名称集合
        sheetNames: [],
        // 激活项
        sheetNameActive: "",
        // 当前激活表格
        SheetActiveTable: ""
    }
})
const { excel } = toRefs(data);
// 视频预览所需数据
const emptyTips = ref('暂无内容');



      //格式为excel时 方法中书写的内容 
            const reader = new FileReader(); //创建了一个FileReader对象，这个对象用于异步读取文件内容
            //通过readAsArrayBuffer将blob转换为ArrayBuffer对象
            reader.readAsArrayBuffer(result.blob) // 这里的res.data是blob文件流
            reader.onload = (event) => {
                // 读取ArrayBuffer数据变成Uint8Array
                var data = new Uint8Array(event.target.result);
                // 这里的data里面的类型和后面的type类型要对应
                var workbook = XLSX.read(data, { type: "array" });
                const sheetNames = workbook.SheetNames // 工作表名称集合
                excel.value.workbook = workbook
                excel.value.sheetNames = sheetNames
                excel.value.sheetNameActive = sheetNames[0]
                //方法
                getSheetNameTable(sheetNames[0])
            };



//定义的方法
const getSheetNameTable = (sheetName) => { 
      try {
        // 获取当前工作表的数据
        const worksheet = excel.value.workbook.Sheets[sheetName]
        // 转换为数据  1.json数据有些问题，2.如果是html那么样式需修改
        let htmlData = XLSX.utils.sheet_to_html(worksheet, { header: '', footer: '' })
        htmlData = htmlData === '' ? htmlData : htmlData.replace(/'
    }
}pdf 预览  
这个需要用到iframe标签  他的blob对象的type需要是"type": "application/pdf"  大家可以看一下自己的blob对象 如果是后端返回的直接是blob格式 但是type不对 那等下我下面代码有转化  如果返回的普通数据 大家自己根据上面的格式自己转化blob对象的时候自己设置一下type 
 
     



//js代码处
  //格式为pdf时
             const reader = new FileReader();
            reader.readAsArrayBuffer(result.blob);
            reader.onload = function () {
                fileAddress.value = URL.createObjectURL(new Blob([reader.result], { "type": "application/pdf" }))
            }
最后是jpg png ,mp4格式预览
  //这里就用到blob对象转化的链接了 注意区分!!
if (type == 'jpg' || type == 'png' || type == 'mp4') {
            fileAddress.value = result.url
}


//图片类型展示
 

//视频类型展示
  
           
    
下载文件 !!
 下载


// 文件下载
const DownloadFn = () => { 
    let a = document.createElement('a')
     // 下载链接
    a.href = blobUploadValue.value  //这个就是那个blob链接!!
    // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
    //这里是你上传的文件名 加上他的类型 jpg,png,docx.....
    a.download = fileNameValue.value + '.' + fileType.value
    document.body.appendChild(a)
    // 点击a标签，进行下载 
    a.click()
    // 移除元素
    document.body.removeChild(a)
}
最后是完整代码 

            
                
                
                    {{ item.name }}
                
                
                    
                             下载
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                           
                            
                                
                            
                            
                            
                            
                            
                    
                    
                        
                    
                    
                            该文件暂不支持预览,请下载查看
                    
                
            
        




//js部分

//表格预览所需数据
const data = reactive({
    excel: {
        // 数据
        workbook: {},
        // 表名称集合
        sheetNames: [],
        // 激活项
        sheetNameActive: "",
        // 当前激活表格
        SheetActiveTable: ""
    }
})
const { excel } = toRefs(data);
// 视频预览所需数据
const emptyTips = ref('暂无内容');
// 下载文件
// 文件地址
const fileAddress = ref('')
// 下载流数据
const blobUploadValue = ref('')

//我这里的参数type是其他地方传递过来的 注意甄别
const downloadFn = (id, type) => {
    let params = { fileId: id }
    download(params).then(result => {
        console.log(result.url, 'resolve');
        console.log(result.blob, 'blob');
         blobUploadValue.value = result.url
        if (type == 'jpg' || type == 'png' || type == 'mp4') {
            //格式为图片 视频时
            fileAddress.value = result.url
        } else if (type == 'docx') {
            //格式为word时
            const previewContainer = document.getElementById('fileShow');
            renderAsync(result.blob, previewContainer) //渲染
        } else if (type == 'xlsx') {
            //格式为excel时
            const reader = new FileReader();
            //通过readAsArrayBuffer将blob转换为ArrayBuffer对象
            reader.readAsArrayBuffer(result.blob) // 这里的res.data是blob文件流
            reader.onload = (event) => {
                // 读取ArrayBuffer数据变成Uint8Array
                var data = new Uint8Array(event.target.result);
                // 这里的data里面的类型和后面的type类型要对应
                var workbook = XLSX.read(data, { type: "array" });
                const sheetNames = workbook.SheetNames // 工作表名称集合
                excel.value.workbook = workbook
                excel.value.sheetNames = sheetNames
                excel.value.sheetNameActive = sheetNames[0]
                getSheetNameTable(sheetNames[0])
            };
        } else if (type == 'pdf') {
            //格式为pdf时
             const reader = new FileReader();
            reader.readAsArrayBuffer(result.blob);
            reader.onload = function () {
                fileAddress.value = URL.createObjectURL(new Blob([reader.result], { "type": "application/pdf" }))
            }
        }
    })
}

// 文件下载
const DownloadFn = () => { 
    let a = document.createElement('a')
     // 下载链接
    a.href = blobUploadValue.value
    // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
    a.download = fileNameValue.value + '.' + fileType.value
    document.body.appendChild(a)
    // 点击a标签，进行下载 
    a.click()
    // 移除元素
    document.body.removeChild(a)
}

const getSheetNameTable = (sheetName) => { 
      try {
        // 获取当前工作表的数据
        const worksheet = excel.value.workbook.Sheets[sheetName]
        // 转换为数据  1.json数据有些问题，2.如果是html那么样式需修改
        let htmlData = XLSX.utils.sheet_to_html(worksheet, { header: '', footer: '' })
        htmlData = htmlData === '' ? htmlData : htmlData.replace(/
 
   
   
   
   
   
   
   
   
  
'
    }
}










 这里是后端返回回来一个附件名称列表 我渲染到左侧的附件列表中 然后通过选中不同的附件 右侧展示不同的文件预览 他的文件类型我也是从这里得到的 然后我通过点击不同的附件列表 执行上面的预览方法 获取到不同的blob数据 然后进行展示 
我只能给大家说一下我的逻辑 毕竟每个人代码不一样 不一定能直接复制  还是希望能帮到大家
最后贴上效果图
 

                    
                        
                        
                             
                        
                        
                        
                            
                        
                        
                        
                            
                        
                    
                

        你可能感兴趣的:(开发Tips,Element-Plus,小tips,Vue预览文件,pdf)
        
            
                
                    移动端城市区县二级联动选择功能实现包
                        good2know

                        本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
                    
                    15个小技巧，让我的Windows电脑更好用了！
                        曹元_

                        01.桌面及文档处理第一部分的技巧，主要是围绕桌面的一些基本操作，包括主题设置、常用文档文件快捷打开的多种方式等等。主题换色默认情况下，我们的Win界面可能就是白色的文档界面，天蓝色的图表背景，说不出哪里不好看，但是就是觉得不够高级。imageimage说到高级感，本能第一反应就会和暗色模式联想起来，如果我们将整个界面换成黑夜模式的话，它会是这样的。imageimage更改主题颜色及暗色模式，我们
                    
                    9、汇编语言编程入门：从环境搭建到简单程序实现
                        神经网络酱
汇编语言MEPISGNU工具链
                        汇编语言编程入门：从环境搭建到简单程序实现1.数据存储介质问题解决在处理数据存储时，若要使用MEPIS系统，需确保有其可访问的存储介质。目前，MEPIS无法向采用NTFS格式（常用于Windows2000和XP工作站）的硬盘写入数据。不过，若硬盘采用FAT32格式，MEPIS就能进行写入操作。此外，MEPIS还能将文件写入软盘和大多数USB闪存驱动器。若工作站连接到局域网，还可通过FTP协议或挂载
                    
                    SpringMVC执行流程（原理），通俗易懂
                        国服冰
SpringMVCspringmvc
                        SpringMVC执行流程（原理），通俗易懂一、图解SpringMVC流程二、进一步理解Springmvc的执行流程1、导入依赖2、建立展示的视图3、web.xml4、spring配置文件springmvc-servlet5、Controller6、tomcat配置7、访问的url8、视图页面一、图解SpringMVC流程图为SpringMVC的一个较完整的流程图，实线表示SpringMVC框架提
                    
                    Git 与 GitHub 的对比与使用指南
                        一念&
其它gitgithub
                        Git与GitHub的对比与使用指南在软件开发中，Git和GitHub是两个密切相关但本质不同的工具。下面我将逐步解释它们的定义、区别、核心概念以及如何协同使用，确保内容真实可靠，基于广泛的技术实践。1.什么是Git？Git是一个分布式版本控制系统，由LinusTorvalds于2005年创建。它的核心功能是跟踪代码文件的变化，帮助开发者管理项目历史记录、协作和回滚错误。Git是开源的，可以在本地
                    
                    英伟达靠什么支撑起了4万亿？AI泡沫还能撑多久？
                        

                        英伟达市值突破4万亿美元，既是AI算力需求爆发的直接体现，也暗含市场对未来的狂热预期。其支撑逻辑与潜在风险并存，而AI泡沫的可持续性则取决于技术、商业与地缘政治的复杂博弈。⚙️一、英伟达4万亿市值的核心支撑因素技术垄断与生态壁垒硬件优势：英伟达GPU在AI训练市场占有率超87%，H100芯片的FP16算力达1979TFLOPS，领先竞品3-5倍。CUDA生态：400万开发者构建的软件护城河，成为A
                    
                    深入解析JVM工作原理：从字节码到机器指令的全过程
                        

                        一、JVM概述Java虚拟机(JVM)是Java平台的核心组件，它实现了Java"一次编写，到处运行"的理念。JVM是一个抽象的计算机器，它有自己的指令集和运行时内存管理机制。JVM的主要职责：加载：读取.class文件并验证其正确性存储：管理内存分配和垃圾回收执行：解释或编译字节码为机器指令安全：提供沙箱环境限制恶意代码二、JVM架构详解JVM由三个主要子系统组成：1.类加载子系统类加载过程分为
                    
                    Linux系统配置（应用程序）
                        1风天云月
Linuxlinux应用程序编译安装rpmhttp
                        目录前言一、应用程序概述1、命令与程序的关系2、程序的组成3、软件包封装类型二、RPM1、RPM概述2、RPM用法三、编译安装1、解包2、配置3、编译4、安装5、启用httpd服务结语前言在Linux中的应用程序被视为将软件包安装到系统中后产生的各种文档，其中包括可执行文件、配置文件、用户手册等内容，这些文档被组织为一个有机的整体，为用户提供特定的功能，因此对于“安装软件包”与“安装应用程序”这两
                    
                    关于流媒体播放器EasyPlayer和EasyPlayerPro的介绍以及其区别
                        EasyDarwin
EasyDarwin音视频ffmpeg人工智能大数据ar
                        EasyPlayer是一款流媒体播放器系列项目，它支持多种流媒体协议的播放，包括但不限于RTSP、RTMP、HTTP、HLS、UDP、RTP、File等。除此之外，EasyPlayer还支持本地文件播放和多种功能特性，包括本地抓拍、本地录像、播放旋转、多屏播放、倍数播放等。EasyPlayer核心基于ffmpeg，稳定、高效、可靠、可控。随着多年的不断发展和迭代，EasyPlayer基于成功的实践
                    
                    EasyPlayer播放器系列开发计划2025
                        xiejiashu
EasyPlayerEasyPlayerEasyPlayer播放器RTSP播放器js播放器Web播放器
                        EasyPlayer系列产品发展至今，已经超过10年，从最早的EasyPlayerRTSP播放器，到如今维护的3条线：EasyPlayer-RTSP播放器：Windows、Android、iOS；EasyPlayerPro播放器：Windows、Android、iOS；EasyPlayer.js播放器：H5；这3个播放器各有各的应用场景，用户量也是巨大，像RTSP版本的播放器，到今天依然还有很多低
                    
                    包含日志获取webshell
                        陈望_ning

                        日志文件关闭：Apache目录下的httpd.conf文件#ErrorLog"logs/error.log"#CustomLog"logs/access.log"common加#号为注释不产生日志文件如果去掉#将会在Apache/logs/目录下产生日志文件linux:access_logerror_logwindows:access.logerror.logaccess_log每一行记录了一次网
                    
                    Android 应用权限管理详解
                        

                        文章目录1.权限类型2.权限请求机制3.权限组和分级4.权限管理的演进5.权限监控和SELinux强制访问控制6.应用权限审核和GooglePlayProtect7.开发者最佳实践8.用户权限管理9.Android应用沙箱模型10.ScopedStorage（分区存储）11.背景位置权限（BackgroundLocationAccess）12.权限回收和自动清理13.权限请求的用户体验设计14.G
                    
                    uniapp微信小程序 - 详解微信小程序平台用户授权登录全流程，uniapp v3版本中小程序端开发下用户点击登录后获取手机号/昵称/性别/头像等信息完成登录（提供完整示例代码，一键复制开箱即用）
                        十一猫咪爱养鱼
前端组件与功能(开箱即用)uniapp常见问题解决uniappvue3uniapp3小程序授权登录微信小程序登录获取用户信息教程获取用户昵称手机号头像信息登录vue3版本小程序平台授权登录uniap小程序端用户登录流程uni完整的小程序平台登录源码
                        效果图在uniapp微信小程序端开发中，超详细实现用户授权登录完整功能源码，用户授权后获取手机号/昵称/头像/性别等，提供完整思路流程及逻辑讲解。uniappVue3和Vue2都能用，你也可以直接复制粘贴，然后改下参数放到你的项目中去就行。整体思路做功能之前，先来看一下整体流程是
                    
                    处于停机等非正常状态_设备非正常停机管理指导办法
                        

                        设备非正常停机管理指导办法一、设备非正常停机的范围：1、维护、维修不良：未遵守设备维护及维修规程，导致维护、维修质量无法满足设备运行的技术、环境要求而造成的设备停机，例如：未按维护保养计划保养、维护质量不到位、违章检修，故障维修不彻底，润滑缺油或变质等。2、违章操作：未按照设备操作规程及作业文件等操作而造成的设备停机。3、设备点检缺失：是指设备操作者及维修人员未严格按照点检标准有效地对设备各部位进
                    
                    DPDK 技术详解：榨干网络性能的“瑞士军刀”
                        

                        你是否曾感觉，即使拥有顶级的服务器和万兆网卡，你的网络应用也总是“喂不饱”硬件，性能总差那么一口气？传统的网络处理方式，就像在高速公路上设置了太多的收费站和检查点，限制了数据包的“奔跑”速度。今天，我们要深入探讨一个能够打破这些瓶颈，让你的网络应用快到飞起的“黑科技”——DPDK(DataPlaneDevelopmentKit，数据平面开发套件)。这不仅仅是一个工具包，更是一种全新的网络处理哲学。
                    
                    Pktgen-DPDK：开源网络测试工具的深度解析与应用
                        艾古力斯

                        本文还有配套的精品资源，点击获取简介：Pktgen-DPDK是基于DPDK的高性能流量生成工具，适用于网络性能测试、硬件验证及协议栈开发。它支持多种网络协议，能够模拟高吞吐量的数据包发送。本项目通过利用DPDK的高速数据包处理能力，允许用户自定义数据包内容，并实现高效的数据包管理与传输。文章将指导如何安装DPDK、编译Pktgen、配置工具以及使用方法，最终帮助开发者和网络管理员深入理解并优化网络
                    
                    C++编程基础与面向对象概念解析
                        侯昂
面向对象编程C++语法函数类与对象继承与多态性
                        C++编程基础与面向对象概念解析背景简介C++是一种广泛使用的面向对象编程语言，它允许开发者创建高效、灵活且功能强大的程序。本文基于《C++Primer》一书的章节内容，深入解析C++的核心概念和面向对象编程原则，旨在帮助读者构建扎实的C++编程基础。面向对象编程的原则软件危机与进化介绍了软件危机的产生和软件进化的必要性，强调了面向对象编程（OOP）在应对这些问题中的优势。面向对象编程范式讨论了面
                    
                    办公党必备！Excel文件批量加密神器！一键保护你的重要数据
                        阿幸软件杂货间
Excelexcel
                        软件介绍今天推荐的这一款专为Excel文件设计的批量加密工具，能够帮助用户快速、高效地为多个Excel文件设置密码保护，有效防止数据泄露。软件特点本地化离线处理支持批量操作完全免费软件操作选择你需要加密的文件和路径，设置密码进行加密即可软件下载夸克网盘迅雷网盘UC网盘
                    
                    MySQL复习题
                        

                        一.填空题1.关系数据库的标准语言是SQL。2.数据库发展的3个阶段中，数据独立性最高的是阶段数据库系统。3.概念模型中的3种基本联系分别是一对一、一对多和多对多。4.MySQL配置文件的文件名是my.ini或my.cnf。5.在MySQL配置文件中，datadir用于指定数据库文件的保存目录。6.添加IFNOTEXISTS可在创建的数据库已存在时防止程序报错。7.MySQL提供的SHOWCREA
                    
                    你竟然还在用克隆删除？Conda最新版rename命令全攻略！
                        曦紫沐
Python基础知识conda虚拟环境管理
                        文章摘要Conda虚拟环境管理终于迎来革命性升级！本文揭秘Conda4.9+版本新增的rename黑科技，彻底告别传统“克隆+删除”的繁琐操作。从命令解析到实战案例，手把手教你如何安全高效地重命名Python虚拟环境，附带版本检测、环境迁移、故障排查等进阶技巧，助你提升开发效率10倍！一、颠覆认知：Conda居然自带重命名功能？很多开发者仍停留在“Conda无法直接重命名环境”的认知阶段，实际上自
                    
                    大数据之路：阿里巴巴大数据实践——大数据领域建模综述
                        

                        为什么需要数据建模核心痛点数据冗余：不同业务重复存储相同数据（如用户基础信息），导致存储成本激增。计算资源浪费：未经聚合的明细数据直接参与计算（如全表扫描），消耗大量CPU/内存资源。数据一致性缺失：同一指标在不同业务线的口径差异（如“活跃用户”定义不同），引发决策冲突。开发效率低下：每次分析需重新编写复杂逻辑，无法复用已有模型。数据建模核心价值性能提升：分层设计（ODS→DWD→DWS→ADS）
                    
                    Zread.AI：一键将GitHub项目转化为结构化中文手册的AI代码维基工具
                        

                        Zread.AI：一键将GitHub项目转化为结构化中文手册的AI代码维基工具文章来源：PoixeAI文章目录Zread.AI工具概述核心功能优势亮点典型应用场景上手指南注意事项官网地址Zread.AI由智谱Z.ai推出，是一款面向开发者的AI代码维基工具，可在几秒内把任何公开GitHub仓库转化为结构化中文手册，并通过独家Buzz面板聚合commits、issues与相关新闻，让项目脉搏一目了然
                    
                    Android 基础知识：Android 应用权限详解
                        流水mpc
android
                        这篇文章为大家系统的梳理一下Android权限相关的知识，在日常开发中，我们都用过权限，但是对于权限的一些细节我们可能掌握的还不够全面，这篇文章会全面的为大家介绍权限相关的知识。当然，本篇文章依然是参考了Google的官方文档：应用权限。本文目录一、认识Android权限（一）Android系统为什么需要权限？Android系统设置权限的目的是保护Android用户的隐私。对于用户的敏感数据And
                    
                    Android 媒体播放开发完全指南
                        安卓开发者
AndroidJetpackandroid媒体python
                        引言在当今移动应用生态中，媒体播放功能已成为许多应用的核心组成部分。无论是音乐流媒体应用、视频平台、播客客户端还是游戏应用，都需要强大的媒体播放能力。Android平台提供了丰富的API来支持各种媒体播放场景。本文将全面介绍Android媒体播放的开发技术，从基础到高级功能实现。一、Android媒体播放基础1.1支持的媒体格式Android原生支持多种媒体格式：音频：MP3、AAC、FLAC、W
                    
                    Android Slices：让应用功能在系统级交互中触手可及
                        安卓开发者
AndroidJetpackandroid交互gitee
                        引言在当今移动应用生态中，用户每天要面对数十个甚至上百个应用的选择，如何让自己的应用在关键时刻触达用户，成为开发者面临的重要挑战。Google在Android9Pie中引入的Slices技术，正是为了解决这一痛点而生。本文将全面介绍AndroidSlices的概念、实现方法、应用场景以及最佳实践，帮助开发者掌握这一提升用户参与度的强大工具。什么是AndroidSlices？AndroidSlice
                    
                    基于DeepSeek的下一代大型游戏开发革命：架构、核心技术与项目管理实践
                        Liudef06小白
特殊专栏人工智能AIGC架构人工智能deepseek
                        基于DeepSeek的下一代大型游戏开发革命：架构、核心技术与项目管理实践DeepSeek大模型正重塑游戏开发范式，本文将深入解析如何利用这一革命性技术构建下一代大型游戏，涵盖从架构设计到项目管理的全流程实践。目录DeepSeek游戏引擎核心架构1.1神经符号系统融合架构1.2动态世界生成引擎智能NPC与剧情系统2.1角色人格建模技术2.2动态叙事生成算法大型项目管理体系3.1敏捷-AI混合开发流
                    
                    著作权登记申请流程
                        知识产权宗师猫

                        著作权也就是版权登记一般经过下列程序：一、作品登记应提交的材料：1、作品登记申请书（由作品登记机关提供标准格式）；2、作者或其他著作权人的身份证明文件：作者身份证明（复印件，须作者签名）；法人或非法人单位的工商注册登记证明或其他相关证明文件（复印件）；继承人身份证明文件（复印件）；委托作品的委托合同（复印件）；合作作者的合作协议或合同及各合作作者的身份证明（复印件）。3、作品著作权归属证明文件：作
                    
                    【Jupyter】个人开发常见命令
                        TIM老师
#Pycharm&VSCodepythonJupyter
                        1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju
                    
                    程序员必备：10 个提升代码质量的工具
                        大力出奇迹985
宠物
                        在软件开发过程中，代码质量对项目的成功起着决定性作用。高质量的代码不仅易于维护和扩展，还能有效降低成本并提升可靠性。本文精心挑选了10个程序员必备工具，助力提升代码质量。这些工具涵盖代码格式化、静态分析、代码审查、测试、性能优化、安全扫描、版本控制、依赖管理、代码生成以及文档生成等多个关键领域。通过使用它们，开发者能够高效地发现并解决代码中的潜在问题，遵循最佳实践，提升代码的可读性、可维护性与安全
                    
                    java实习生40多天有感
                        别拿爱情当饭吃

                        从5月15日开始，我开始第一步步入社会，我今年大三，在一家上市互联网公司做一名实习生，主要做java后端开发。开始的时候，觉得公司的环境挺不错的，不过因为公司在CBD，所以隔壁的午饭和晚饭都要20+RMB，而且还吃不饱，这让我感觉挺郁闷的。一到下午，我就会犯困（因为饿）。因此，我又不得不买一些干粮在公司屯着。关于技术，有一个比较大的项目在需求调研当中，我们做实习生，就是辅助项目经理，测试功能，并且
                    
                                jQuery 键盘事件keydown ,keypress ,keyup介绍
                                    107x
jsjquerykeydownkeypresskeyup
                                    本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 
一、首先需要知道的是：  1、keydown()  keydown事件会在键盘按下时触发.  2、keyup()     代码如下 复制代码    
$('input').keyup(funciton(){      
                                
                                AngularJS中的Promise
                                    bijian1013
JavaScriptAngularJSPromise
                                    一.Promise 
        Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。 
        为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： 
var cu
                                
                                c++ 用数组实现栈类
                                    CrazyMizzz
数据结构C++
                                    #include<iostream>
#include<cassert>
using namespace std;

template<class T, int SIZE = 50>
class Stack{
private:
	T list[SIZE];//数组存放栈的元素
	int top;//栈顶位置

public:
	Stack(
                                
                                java和c语言的雷同
                                    麦田的设计者
java递归scaner
                                    软件启动时的初始化代码，加载用户信息2015年5月27号 
从头学java二 
1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点： 
     a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 
不会再继续执行。 
     b、for循环相比于whi
                                
                                LINUX环境并发服务器的三种实现模型
                                    被触发
linux
                                    服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 
1  循环服务器与并发服务器模型 
在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 
目前最常用的服务器模型有： 
·循环服务器：服务器在同一时刻只能响应一个客户端的请求 
·并发服务器：服
                                
                                Oracle数据库查询指令
                                    肆无忌惮_
oracle数据库
                                    20140920 
  
单表查询 
-- 查询************************************************************************************************************ 
-- 使用scott用户登录 
  
-- 查看emp表 
  
desc emp 
  

                                
                                ext右下角浮动窗口
                                    知了ing
JavaScriptext
                                    第一种 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/
                                
                                浅谈REDIS数据库的键值设计
                                    矮蛋蛋
redis
                                    http://www.cnblogs.com/aidandan/ 
原文地址：http://www.hoterran.info/redis_kv_design 
 
丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。 
 
                                
                                maven编译可执行jar包
                                    alleni123
maven
                                    http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven 
 
 
<build>
  <plugins>
    <plugin>
      <artifactId>maven-asse
                                
                                人力资源在现代企业中的作用
                                    百合不是茶
HR 企业管理
                                    //人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人
                                
                                Linux自启动设置详解
                                    bijian1013
linux
                                    linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 
阅读之前建议先看一下附图。 
本文中假设inittab中设置的init tree为： 
/etc/rc.d/rc0.d
/etc/rc.d/rc1.d
/etc/rc.d/rc2.d
/etc/rc.d/rc3.d
/etc/rc.d/rc4.d
/etc/rc.d/rc5.d
/etc
                                
                                Spring Aop Schema实现
                                    bijian1013
javaspringAOP
                                    本例使用的是Spring2.5 
1.Aop配置文件spring-aop.xml 
<?xml version="1.0" encoding="UTF-8"?>  
<beans  
    xmlns="http://www.springframework.org/schema/beans"  
    xmln
                                
                                【Gson七】Gson预定义类型适配器
                                    bit1129
gson
                                    Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式， 
  DateTypeAdapter 
  
public final class DateTypeAdapter extends TypeAdapter<Date> {
  public static final TypeAdapterFacto
                                
                                【Spark八十八】Spark Streaming累加器操作（updateStateByKey)
                                    bit1129
update
                                    在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 
比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。 
  
Spark Streaming的解决方案是累加器，工作原理是，定义
                                
                                linux系统下通过shell脚本快速找到哪个进程在写文件
                                    ronin47

                                    一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 
这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 
linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 
幸运的是systemtap的安装包里带了inodewatch.stp，位
                                
                                java-两种方法求第一个最长的可重复子串
                                    bylijinnan
java算法
                                    
import java.util.Arrays;
import java.util.Collections;
import java.util.List;


public class MaxPrefix {

	
	public static void main(String[] args) {
		String str="abbdabcdabcx";

                                
                                Netty源码学习-ServerBootstrap启动及事件处理过程
                                    bylijinnan
javanetty
                                    Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： 
 
http://bylijinnan.iteye.com/blog/1992325 
 
Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 
文章里面提到的操作，每一步都能在Netty里面找到对应的代码 
其中Reactor里面的Acceptor就对应Netty的ServerBo
                                
                                servelt filter listener 的生命周期
                                    cngolon
filterlistenerservelt生命周期
                                    1. servlet    当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
                                
                                jmpopups获取input元素值
                                    ctrain
JavaScript
                                    jmpopups 获取弹出层form表单 
首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 
当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 
我们必须到jmpopups生成的代码中去查找这个值，$(
                                
                                vi查找替换命令详解
                                    daizj
linux正则表达式替换查找vim
                                    一、查找 
 
查找命令 
 
/pattern<Enter> ：向下查找pattern匹配字符串 
?pattern<Enter>：向上查找pattern匹配字符串 
使用了查找命令之后，使用如下两个键快速查找： 
n：按照同一方向继续查找 
N：按照反方向查找 
 
字符串匹配 
 
pattern是需要匹配的字符串，例如： 
 
1:  /abc<En
                                
                                对网站中的js,css文件进行打包
                                    dcj3sjt126com
PHP打包
                                    一，为什么要用smarty进行打包 
apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 
为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
                                
                                php Yii: 出现undefined offset 或者 undefined index解决方案
                                    dcj3sjt126com
undefined
                                    在开发Yii 时，在程序中定义了如下方式： 
       if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
                                
                                linux 文件格式（1） sed工具
                                    eksliang
linuxlinux sed工具sed工具linux sed详解
                                    转载请出自出处：
http://eksliang.iteye.com/blog/2106082  
简介 
      sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
                                
                                Android应用程序获取系统权限
                                    gqdy365
android
                                    引用   
如何使Android应用程序获取系统权限 
 
 
        第一个方法简单点，不过需要在Android系统源码的环境下用make来编译： 
 
        1. 在应用程序的AndroidManifest.xml中的manifest节点
                                
                                HoverTree开发日志之验证码
                                    hvt
.netC#asp.nethovertreewebform
                                    HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
                                
                                JSON API：用 JSON 构建 API 的标准指南中文版
                                    justjavac
json
                                    译文地址：https://github.com/justjavac/json-api-zh_CN 
如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 
通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 
基于 JSON API 的客户端还能够充分利用缓存，
                                
                                数据结构随记_2
                                    lx.asymmetric
数据结构笔记
                                    第三章 栈与队列 
一．简答题 
1. 在一个循环队列中，队首指针指向队首元素的  前一个    位置。  
2.在具有n个单元的循环队列中，队满时共有  n-1  个元素。  
3. 向栈中压入元素的操作是先  移动栈顶指针&n
                                
                                Linux下的监控工具dstat
                                    网络接口
linux
                                    1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是, 
                                
                                C 语言初级入门--二维数组和指针
                                    1140566087
二维数组c/c++指针
                                    /* 
 二维数组的定义和二维数组元素的引用 
 
 二维数组的定义： 
 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； 
 (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 
 语法： 
 类型名 数组名[常量表达式1][常量表达式2] 
 
 二维数组的引用： 
 引用二维数组元素时必须带有两个下标，引用形式如下： 
 例如： 
 int a[3][4];  引用：
                                
                                10点睛Spring4.1-Application Event
                                    wiselyman
application
                                    10.1 Application Event 
 
 Spring使用Application Event给bean之间的消息通讯提供了手段 
 应按照如下部分实现bean之间的消息通讯 
   
   继承ApplicationEvent类实现自己的事件 
   实现继承ApplicationListener接口实现监听事件 
   使用ApplicationContext发布消息 
    
 
                                
                
            
        
    

    
        
            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    

    
        
            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

Vue3 实现文件预览 Word Excel pdf 图片 视频等格式 大全!!!!

插件安装

介绍后端返回的数据

Word预览

Excel预览

pdf 预览

最后是jpg png ,mp4格式预览

下载文件 !!

你可能感兴趣的:(开发Tips,Element-Plus,小tips,Vue预览文件,pdf)

Vue3 实现文件预览 Word Excel pdf 图片视频等格式大全!!!!