• Stars
    star
    166
  • Rank 227,748 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🎄 自己整理的一些项目中遇到过的关于上传和下载的一些Demo,仅供给位看官参考,避免踩坑,即插即用,欢迎fork和star🌟,为这个仓库添砖加瓦~(P.S. 个人认为如果没写过上传下载其实还是挺麻烦的~)

frontend-download-sample

自己整理的一些项目中遇到过的关于上传和下载的一些Demo,大前端系列(也就是纯前端 + node端完成的下载,只要获取到数据下载工作全是前端来做),仅供给位看官参考,避免踩坑,即插即用,欢迎fork和star🌟,为这个仓库添砖加瓦~(P.S. 个人认为如果没写过上传下载其实还是挺麻烦的~)

写在前面

我平时在项目中接触的也就是一些上传图片,上传安装包,下载图片,下载安装包以及整理数据生成excel文件下载下来。暂时还没有接触过其他类型的,所以本项目可能有一定的局限性,只是给大家提供一种思路或者方案,有其他想法欢迎评论~

纯前端下载形式

演示Demo

  第一步: npm install -g http-server

  第二步: 进入工程目录

  第三步: $ http-server

  第四步: 浏览器输入 http://127.0.0.1:8080/

基于a标签下载

基于location&iframe下载

前端下载利器FileSaver

node端配合下载(大前端)

演示Demo

  第一步: cd node-demo

  第二步: yarn install

  第三步: yarn start

  第四步: 在浏览器 http://localhost:3006/ 查看Demo

先下载到本地再下载到浏览器

直接下载到浏览器 => [推荐]

详细文档

More Repositories

1

next-antd-scaffold

🏠 A simple scaffold based on Next.js for quick use with ant-design, redux, redux-saga, fetch and pm2.
JavaScript
292
star
2

dynamic-antd-theme

🌈 A simple plugin to dynamic change ant-design theme whether less or css.
CSS
250
star
3

express-react-scaffold

🔨 后端使用node+express,前端使用react全家桶的精简脚手架。
JavaScript
63
star
4

useful-kit

🧰 Front-end code toolkit simple to use.
TypeScript
57
star
5

mini-dynamic-antd-theme

🌈 Mini dynamic antd theme whether ant-design or ant-design-vue, after gizp 11 kB.
TypeScript
48
star
6

simple-drawio-starter

🎨 A Simple Drawio Starter for Pro-Development DrawIO.
JavaScript
42
star
7

next-markdown-editor

A demo for edit & priview markdown base on next.js quickly!
JavaScript
22
star
8

offer-javascript

剑指offer编程题--JavaScript版本
JavaScript
20
star
9

web-rtsp-video

A Demo With Web Support RTSP Stream.
JavaScript
19
star
10

generate-effective-desktop

💻 自定义配置颜色文本,生成个性化所需的四格效率桌面背景图片~
17
star
11

activity-demo

活动相关内容Demo
TypeScript
8
star
12

awesome-hooks-fetch-demo

A React Hooks HOC For Awesome Fetch Data.
TypeScript
8
star
13

allpeople-financial-independence

愿所有人都能早日财富自由
JavaScript
6
star
14

next-sentry-easy

luffyZh next.js demo with sentry
JavaScript
6
star
15

rc-async-component

A react async component for lazy load component.
JavaScript
6
star
16

day-questions-for-interview

前端每日一题系列~HTML+CSS+JS,每种类型一道,坚持下来,Offer在向我们招手~
5
star
17

breakthrough-interview

【秃破前端面试】系列文章对应代码仓库
HTML
5
star
18

canvas-minions-login

A login html use canvas~
4
star
19

react-use-gamepads

React Hooks for Better Using the Gamepad API inside React .
TypeScript
4
star
20

docusaurus-luffyzh-website

luffyZh website based on docusaurus.
JavaScript
4
star
21

gatsby-animate-blog

🌠 A simple && cool blog site starter kit by Gatsby.
JavaScript
3
star
22

typora-awesome-green

The awesome green for typora.
CSS
3
star
23

juejin-html5-courses-code

掘金 HTML5 教程示例代码
HTML
2
star
24

if-comp

A very simple component for react when you need to render the component according to the value of the expression.
JavaScript
2
star
25

html5Lock

html5滑动解锁--360前端星计划作业
JavaScript
2
star
26

electron-react-auto-update

electron-react-auto-update
TypeScript
2
star
27

assignment-bigbrain

Assignment3 - Reactjs Big Brain
JavaScript
2
star
28

juejin-markdown-theme-awesome-green

A juejin markdown editor green theme by luffyZh
SCSS
2
star
29

party-lottery

年会抽奖程序
HTML
2
star
30

apidoc-demo

边写边学系列(一) —— 使用apiDoc,搞定自动化文档
JavaScript
1
star
31

fat-calculator

小周大夫出品、小周同学开发的最贴心的体脂计算器!
JavaScript
1
star
32

frontend-upload-sample

前端相关上传Demo,处理相关上传事件,包括图片,文件,安装包等形式的直接上传和缓存上传。
JavaScript
1
star
33

react-best-input

A simple and best input component for react.
JavaScript
1
star
34

svgjs-demo

Learn svg.js && draw a chstom chart.
JavaScript
1
star
35

react-full-state-demo

最全的 React 状态管理演示仓库~
1
star
36

gatsby-study-demo

A Gatsby Study Demo.
JavaScript
1
star
37

luffyZh

The luffyZh Github Profile Repo.
1
star
38

github-actions-demo

A github actions demo of cra.
TypeScript
1
star
39

nextjs-fullstack-starter

Next.js + Typescript Fullstack starter.
TypeScript
1
star
40

JavaScript-Toolkit

Collect some JavaScript method and demo for some people.
JavaScript
1
star
41

react-tree-map

A react component for auto generate a beautiful tree node
HTML
1
star
42

johvin-guideline-demo

github-page-demo based on create-react-app for guideline the author is my mentor.
1
star