node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)

这篇具有很好参考价值的文章主要介绍了node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识),web站点,JavaScript专栏,node.js,javascript,服务器,pdf,下载

⭐前言

大家好,我是yma16,本文分享关于node实战——koa实现文件下载和图片预览。
本文适用对象:前端初学者转node方向,在校大学生,即将毕业的同学,计算机爱好者。
node系列往期文章
node_windows环境变量配置
node_npm发布包
linux_配置node
node_nvm安装配置
node笔记_http服务搭建(渲染html、json)
node笔记_读文件
node笔记_写文件
node笔记_连接mysql实现crud
node笔记_formidable实现前后端联调的文件上传
node笔记_koa框架介绍
node_koa路由
node_生成目录
node_读写excel
node笔记_读取目录的文件
node笔记——调用免费qq的smtp发送html格式邮箱
node实战——搭建带swagger接口文档的后端koa项目(node后端就业储备知识)
node实战——后端koa结合jwt连接mysql实现权限登录(node后端就业储备知识)
node实战——koa给邮件发送验证码并缓存到redis服务(node后端储备知识)
http下载
HTTP下载是通过HTTP协议从Internet上下载(或上传)文件的过程。它是一种通过网页浏览器下载文件的常见方式。

通常,HTTP下载发生在以下情形下:

  1. 用户在网页浏览器中单击下载链接时,浏览器自动使用HTTP协议向服务器请求文件并将其下载到本地计算机。

  2. 用户使用特殊的下载管理器程序(如IDM,迅雷等)来下载文件,这些下载管理器也使用HTTP协议从服务器下载文件。

无论使用哪种方式,HTTP下载的基本过程都是相同的:客户端向服务器请求文件并接收响应,然后将文件下载到本地计算机。

⭐koa-send库实现下载

koa-send is a middleware for the Koa web framework that simplifies
sending static files as responses to HTTP requests. It allows you to
serve files from a directory and optionally apply cache-control
headers, send files as attachments, and handle range requests (partial
content). It is commonly used to serve CSS, JavaScript, images, and
other types of static assets.

koa-send 是 Koa Web 框架的中间件,它简化了发送静态文件作为对 HTTP 请求的响应的过程。它允许您从目录中提供文件,并选择性地应用缓存控制标头、将文件作为附件发送以及处理范围请求(部分内容)。它通常用于提供 CSS、JavaScript、图像和其他类型的静态资产。

安装


$ npm install koa-send

封装一个下载exe的功能

const Router = require('koa-router');
const router = new Router();
const send = require('koa-send');

// down exe
router.get('/down/exe', async (ctx) => {
    try{
        const file_path='./db/exe/tools/cat-tools-setup.exe'
        ctx.attachment(file_path);
        await send(ctx, file_path);
    }
    catch(e){
        ctx.body = { code: 0, data:e,msg: 'get label fail'};
    }
});

module.exports=router

下载 ./db/exe/tools/cat-tools-setup.exe对应的文件
实现效果 https://yongma16.xyz/cat-web/#/
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识),web站点,JavaScript专栏,node.js,javascript,服务器,pdf,下载

⭐mime-types库实现图片预览

MIME types (Multipurpose Internet Mail Extensions types) are a way to
classify files on the Internet according to their nature and format.
They are used by web servers and browsers to recognize the file type
of a document being requested or transmitted. Examples of MIME types
include:

  • text/plain: plain text file
  • text/html: HTML (Hypertext Markup Language) file
  • image/jpeg: JPEG image file
  • image/png: PNG image file
  • application/pdf: PDF (Portable Document Format) file
  • application/vnd.ms-excel: Microsoft Excel file
  • application/vnd.openxmlformats-officedocument.spreadsheetml.sheet: Microsoft Excel OpenXML file
  • application/vnd.ms-powerpoint: Microsoft PowerPoint file
  • application/vnd.openxmlformats-officedocument.presentationml.presentation:
    Microsoft PowerPoint OpenXML file
  • audio/mpeg: MP3 audio file
  • video/mp4: MPEG-4 video file. There are many other MIME types for different types of files, and new ones are added as new file formats
    emerge.

MIME 类型(多用途 Internet 邮件扩展类型)是一种根据其性质和格式对 Internet 上的文件进行分类的方法。Web 服务器和浏览器使用它们来识别所请求或传输的文档的文件类型。MIME 类型的示例包括:

  • text/plain:纯文本文件
  • text/html:HTML(超文本标记语言)文件
  • image/jpeg:JPEG图像文件
  • image/png:PNG 图像文件
  • application/pdf: PDF(便携式文件格式)文件
  • application/vnd.ms-excel:Microsoft Excel 文件
  • application/vnd.openxmlformats-officedocument.spreadsheetml.sheet:Microsoft Excel OpenXML 文件
  • application/vnd.ms-powerpoint:Microsoft PowerPoint 文件
  • application/vnd.openxmlformats-officedocument.presentationml.presentation:Microsoft
  • PowerPoint OpenXML 文件
  • audio/mpeg:MP3 音频文件
  • video/mp4:MPEG-4 视频文件。
    对于不同类型的文件,还有许多其他 MIME 类型,并且随着新文件格式的出现,会添加新的 MIME 类型。
    安装mime-types
$ npm install mime-types

封装渲染的api

const Router = require('koa-router');
const router = new Router();
const mime = require('mime-types');
const fs=require('fs')
// down exe
router.get('/media/view', async (ctx) => {
    try{
        const {path}=ctx.query
        const filePath='./media/static/'+path
        let file = null;
        try {
            file = fs.readFileSync(filePath); //读取文件
        } catch (error) {
            //如果服务器不存在请求的图片,返回默认图片
            file = fs.readFileSync('./media/static/404.png'); //读取文件
        }

        let mimeType = mime.lookup(filePath); //读取图片文件类型
        ctx.set('content-type', mimeType); //设置返回类型
        ctx.body = file; //返回图片
    }
    catch(e){
        ctx.body = { code: 0, data:e,msg: 'view media fail'};
    }
});

module.exports=router

渲染成功!

💖 渲染图片

node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识),web站点,JavaScript专栏,node.js,javascript,服务器,pdf,下载

💖渲染404

node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识),web站点,JavaScript专栏,node.js,javascript,服务器,pdf,下载

💖预览pdf

node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识),web站点,JavaScript专栏,node.js,javascript,服务器,pdf,下载

💖预览视频

node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识),web站点,JavaScript专栏,node.js,javascript,服务器,pdf,下载

⭐总结

Koa 是一个 Node.js Web 框架,它提供了一组 API,用于构建 Web 应用程序和 API。在使用 Koa 进行 Web 开发时,通常需要下载和安装 Koa,然后编写代码来定义路由、处理请求和响应、以及渲染视图等。

以下是使用 Koa 进行 Web 开发时需要掌握的主要内容:

  1. 下载和安装 Koa:可以使用 npm 命令来下载和安装 Koa,如:npm install koa。

  2. 定义路由:可以使用 Koa-router 模块来定义路由,将请求映射到处理程序上。

  3. 处理请求和响应:可以使用 Koa 中间件来处理请求和响应,例如:koa-bodyparser 中间件用于解析请求体,koa-static 中间件用于提供静态文件服务等。

  4. 渲染视图:可以使用第三方模板引擎来渲染视图,例如:koa-views 中间件用于集成模板引擎,例如 ejs、pug、handlebars 等。

使用 Koa 进行 Web 开发,需要具备一定的 Node.js 基础、HTTP 知识、异步编程和中间件等方面的技能。同时,需要熟练掌握 Koa 的 API 和相关的第三方模块,以便快速开发高效的 Web 应用程序和 API。

下载使用 koa-send
预览使用 mime-types

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识),web站点,JavaScript专栏,node.js,javascript,服务器,pdf,下载

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 最后,感谢你的阅读!文章来源地址https://www.toymoban.com/news/detail-751860.html

到了这里,关于node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • poi-tl设置图片(通过word模板替换关键字,然后转pdf文件并下载)

    选中图片右击  选择设置图片格式   例如word模板   maven依赖   读取  代码

    2024年02月11日
    浏览(61)
  • js实现PDF 预览和文件下载

    在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能, PDF 类型文件的来源又包括 H5 移动端 和 PC 端 ,而针对这两个不同端的处理会有些许不同,下文会有所提及。 针对 PDF 预览 的文章不在少数,但似乎都没有提及可能遇到的问题,或是提供对应的具体需求场景下如何

    2024年02月15日
    浏览(52)
  • vue 纯前端预览pdf,纯前端实现pdf加水印下载文件也带水印,防止pdf下载

      原理:主要是利用pdfh5这个插件来完成的   使用方法:   1.页面需要有一个容器例子:div id=\\\"demo\\\"/div   2.下载pdfh5插件 npm install pdfh5   (注意:webpack5之后不会下载polyfill 需要手动下载 所以引入pdfh5的时候会报错)   解决方案:下载 node-polyfill-webpack-plugin npm install node-polyfill-

    2024年04月15日
    浏览(68)
  • springboot+微信小程序实现文件上传下载(预览)pdf文件

    实现思路: 选择文件 wx.chooseMessageFile ,官方文档: https://developers.weixin.qq.com/miniprogram/d e v/api/media/image/wx.chooseMessageFile.html 上传文件 `wx,uploadFile` , 官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html 查看所有上传的pdf文件,显示在页面上 点击pdf文件

    2024年02月08日
    浏览(76)
  • vue下载pdf文件纯前端实现,不跳页面实现

    一、引入download.js npm install downloadjs 地址:https://www.npmjs.com/package/downloadjs 注意:使用download.js时下载的文件内容为该文件的url(url和filename参数有中文的话下载后的文件会损坏打不开,需要修改源码) 二、复制一份下载好的downloadjs 文件 , 修改后的源码

    2024年02月12日
    浏览(60)
  • java实现pdf文件添加水印,下载到浏览器

    添加itextpdf依赖 根据需求,不需要指定路径可以删除对应的输出流 效果如下:代码中的相对路径在src平级目录下,test.pdf是PdfStamper里面fileOutputStream生成的,test1.pdf是fos生成的 浏览器下载的如下: 生成的pdf内容如下(红框里面是pdf原来的内容,可以自己调整代码中注释掉的设

    2024年02月05日
    浏览(60)
  • 【前端下载文件流详解】前端实现多种类型文件(word,excel,pdf,rar,zip等)的下载,接口返回文件流形式(附源码)

    【 写在前面 】其实之前我也写了有关java实现文件的下载,但是当时是局限于excel文档,针对其他类型的并没有介绍,这次刚好有个客户现场反馈回来的,说我们系统确实能下载报告,但是甲方领导要看所有的报告,这不我每天得一个一个的点击下载,然后再打包给他们领导

    2023年04月24日
    浏览(55)
  • 【Java实战】Feign调用文件下载服务接口实现文件下载功能

    最近需要实现Feign调用服务提供者的文件下载接口,进行文件下载功能,这里对功能的实现做一个简单的记录 通过调用服务提供者的文件下载接口,将文件传输的流数据通过 feign.Response 来接收,服务消费者再将数据转化 首先,在项目中引入Feign的依赖。你可以使用Maven进行管

    2024年02月12日
    浏览(80)
  • uniapp实现h5、app、微信小程序三端pdf文件下载和预览

    以下代码兼容三端,app,h5,微信小程序,经过个人测试 手机端有两种方法,使用renderjs或者uniapp的api 两者的区别 使用renderjs的写法,会提示用户是否下载文件,下载完成后用户需要手动点击下载的文件,才会打开文件 使用uniapp的api则可以直接下载并直接预览,不需要用户操

    2024年02月11日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包