html5 download #11

xgqfrms · 2018-11-07T02:23:45Z

html5 download & js

https://www.w3schools.com/TAGS/att_a_download.asp

<a href="/images/myw3schoolsimage.jpg" download="w3logo">

https://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file

https://developers.google.com/web/updates/2011/08/Downloading-resources-in-HTML5-a-download

xgqfrms · 2018-11-07T02:27:29Z

download image & rename

https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml5_a_download

<!DOCTYPE html>
<html>
<body>

<p>Click on the w3schools logo to download the image:<p>

<a href="/images/myw3schoolsimage.jpg" download="xgqfrms">
  <img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>

<p><b>Note:</b> The download attribute is not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).</p>

</body>
</html>

xgqfrms · 2018-11-07T02:29:13Z

download pdf & rename

xgqfrms & download & pdf & rename

https://codepen.io/xgqfrms/full/GyEGzG/

https://stackoverflow.com/questions/3102226/how-to-set-name-of-file-downloaded-from-browser

xgqfrms · 2018-11-07T02:29:24Z

https://www.cnblogs.com/xgqfrms/p/9920588.html

xgqfrms · 2020-10-11T02:44:20Z

auto download images

https://www.w3schools.com/TAGS/att_a_download.asp

<p>Click on the image to download it:<p>

<a href="/images/myw3schoolsimage.jpg" download>
  img
</a>

xgqfrms · 2020-10-11T02:47:43Z

auto download icons

xgqfrms · 2020-10-11T02:48:26Z

auto download logos

xgqfrms · 2020-10-11T02:50:12Z

html5 download all in one

https://www.cnblogs.com/xgqfrms/p/10082870.html

xgqfrms · 2020-10-11T03:02:41Z

test

https://www.lanqiao.cn/paths/

xgqfrms · 2020-10-11T03:12:50Z

HTML5 download 执行条件

同一个域名下的资源
http only
绝对路径/相对路径都可以

demo

https://cdn.xgqfrms.xyz/

https://cdn.xgqfrms.xyz/HTML5/auto-dwonload-images/index.html

跨域的第三方资源，会直接跳转到第三方资源连接
file:///Users/xgqfrms-mbp/Documents/GitHub/cdn/html5/download/image-auto-downloader.html 不好使，会直接打开连接

same origin

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download

https://caniuse.com/?search=download

https://stackoverflow.com/questions/49760160/a-download-attribute-not-working-anymore

xgqfrms · 2020-10-11T03:27:09Z

HTML5 download Attribute

https://davidwalsh.name/download-attribute

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/download

html5 download attribute not working

https://stackoverflow.com/questions/23872902/chrome-download-attribute-not-working/35290284

https://stackoverflow.com/questions/49760160/a-download-attribute-not-working-anymore

xgqfrms · 2022-04-16T17:58:17Z

https://cdn.xgqfrms.xyz/HTML5/Blob/fetch/index.html
https://cdn.xgqfrms.xyz/HTML5/Blob/xhr/index.html
https://cdn.xgqfrms.xyz/HTML5/Blob/index.html

服务端控制是否可以下载 ???

https://cdn.xgqfrms.xyz/HTML5/auto-dwonload-images/index.html

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

??? Node.js server return download file without extension filename

xgqfrms · 2022-04-16T18:04:35Z

https://javascript.xgqfrms.xyz/

preivew url

https://cdn.xgqfrms.xyz/offical-docs/ECMA/ECMA-262%206th%20edition%20June%202015.pdf
https://cdn.xgqfrms.xyz/offical-docs/ECMA/ECMA-262%207th%20edition%20June%202016.pdf

download raw

https://raw.githubusercontent.com/xgqfrms/cdn/gh-pages/offical-docs/ECMA/ECMA-262%206th%20edition%20June%202015.pdf

xgqfrms · 2022-04-16T18:08:50Z

Linux bash script 批量下载文件 All In One

preview

https://cs193p.sites.stanford.edu/sites/g/files/sbiybj16636/files/media/file/l1.pdf

??? download === write file stream

#!/bin/bash

# 下载目录
downdir="/Users/xgqfrms-mbp/Documents/swift-ui/Memorize/000-xyz/pdfs/"

# 读取文件
cat $1 | while read line
do
  echo "$line"
  cd $downdir
  str=$line
  # 按行分割，每行一个
  array=(${str//;/ })
  echo "$array"
  url=${array[0]}
  filename=$(echo ${array[1]} | tr -d '\r')
  # filename=$(echo "l" + ${index} + ".pdf" | tr -d '\r')
  # filename=$(echo "l${index}.pdf" | tr -d '\r')
  # 执行下载
  curl $url -o $filename
done

# chomd +x ./auto-download-pdfs.sh
# mkdir pdfs
# bash ./auto-download-pdfs.sh cs193p.txt

https://www.cnblogs.com/xgqfrms/p/16073509.html

作者：xgqfrms
链接：https://www.cnblogs.com/xgqfrms/p/16086580.html
来源：https://www.cnblogs.com
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
©xgqfrms 2012-2022
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

xgqfrms · 2022-04-16T18:15:21Z

Node.js download remote cdn URL file

https://www.npmjs.com/package/request

fetch api ???

const fs = require("fs");
var path = require("path");
const { exit } = require("process");
const log = console.log;
const request = require("request");
// const request = require("request-promise-native");

var folder = path.resolve(__dirname, '../pdf');

// log('folder', folder);

if (!fs.existsSync(folder)) {
  fs.mkdirSync(folder);
}


async function downloadPDF(url, filename) {
  log('🚧 pdf downloading ...');
  const pdfBuffer = await request.get({
    uri: url,
    encoding: null,
    // encoding: 'utf-8',
  });

   // write 下载文件 ✅ ??? Node.js 控制浏览器，下载文件还是打开预览文件 ??? 
  fs.writeFileSync(filename, pdfBuffer);
  log('✅ pdf finished!');
  // exit 0;
}

const url = 'https://cs193p.sites.stanford.edu/sites/g/files/sbiybj16636/files/media/file/l1.pdf';
const filename = folder + '/cs193p-2021-l1.pdf';


// log('filename =', filename);

downloadPDF(url, filename);

fs.writeFileSync(filename, pdfBuffer); write 下载文件 ✅ ??? Node.js 控制浏览器，下载文件还是打开预览文件 ???

xgqfrms · 2022-04-16T18:17:14Z

attachment

var express=require("express")
var app=express();
var fs = require('fs');
var path=require("path");
app.get("/upload",function(req,res){
    var filePath = path.join(__dirname, './');
    console.log(filePath)
    fs.readFile(filePath+"images/2010191.png", function(err, data){
        res.set({
            'Content-Type': 'application/octet-stream', 
             //告诉浏览器这是一个二进制文件
            'Content-Disposition': 'attachment; filename=upload.png' ,
             //告诉浏览器这是一个附件要下载是png图片
        });
        res.end(data);
    });
})

app.listen(3000, function(){
    console.log("server is running", 3000);
});

xgqfrms · 2022-04-16T18:18:26Z

Content-Disposition 内容处置

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition

在常规的 HTTP 应答中，Content-Disposition 响应头指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地。

xgqfrms · 2022-04-17T03:45:39Z

Node.js 服务器控制浏览器下载文件还是预览文件 All In One

作者：xgqfrms
链接：https://www.cnblogs.com/xgqfrms/p/16155131.html
来源：https://www.cnblogs.com
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
©xgqfrms 2012-2022
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

xgqfrms · 2022-04-17T03:52:33Z

HTTP response status code & 206 Partial Content All In One

作者：xgqfrms
链接：https://www.cnblogs.com/xgqfrms/p/16155289.html
来源：https://www.cnblogs.com
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
©xgqfrms 2012-2022
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

xgqfrms · 2022-04-17T03:54:34Z

HTML5 download 执行条件

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download

download normal file

https://stackoverflow.com/questions/3102226/how-to-set-name-of-file-downloaded-from-browser/48064008#48064008

download blob file

https://stackoverflow.com/questions/71686536/how-to-set-the-download-file-extension-for-blob-data/71895888#71895888

#11

xgqfrms · 2022-04-17T04:21:50Z

just need to use HTML5 `a` tag `download` attribute

`codepen` live demo

https://codepen.io/xgqfrms/full/GyEGzG/

my screen shortcut.

update answer

whether a file is downloadable depends on the server's response config, such as Content-Type, Content-Disposition;
download file's extensions are optional, depending on the server's config, too.

'Content-Type': 'application/octet-stream',
// it means unknown binary file,
// browsers usually don't execute it, or even ask if it should be executed.

'Content-Disposition': `attachment; filename=server_filename.filetype`,
// if the header specifies a filename,
// it takes priority over a filename specified in the download attribute.

download `blob` url file

    function generatorBlobVideo(url, type, dom, link) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.responseType = 'arraybuffer';
      xhr.onload = function(res) {
        // console.log('res =', res);
        var blob = new Blob(
          [xhr.response],
          {'type' : type},
        );
        // create blob url
        var urlBlob = URL.createObjectURL(blob);
        dom.src = urlBlob;
        // download file using `a` tag
        link.href = urlBlob;
      };
      xhr.send();
    }

    (function() {
      var type = 'image/png';
      var url = 'https://cdn.xgqfrms.xyz/logo/icon.png';
      var dom = document.querySelector('#img');
      var link = document.querySelector('#img-link');
      generatorBlobVideo(url, type, dom, link);
    })();

https://cdn.xgqfrms.xyz/HTML5/Blob/index.html

refs

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#important_mime_types_for_web_developers

xgqfrms added the html5 download html5 download label Nov 7, 2018

Repository owner locked and limited conversation to collaborators Nov 7, 2018

xgqfrms added auto download icons auto download icons auto download images auto download images labels Oct 11, 2020

xgqfrms added auto download logos auto download logos js a link auto download js a link auto download labels Oct 11, 2020

xgqfrms added HTML5 download Attribute HTML5 download Attribute HTML5 download 执行条件 HTML5 download 执行条件 labels Oct 11, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

html5 download #11

html5 download #11

xgqfrms commented Nov 7, 2018

xgqfrms commented Nov 7, 2018

xgqfrms commented Nov 7, 2018

xgqfrms commented Nov 7, 2018

xgqfrms commented Oct 11, 2020 •

edited

Loading

xgqfrms commented Oct 11, 2020 •

edited

Loading

xgqfrms commented Oct 11, 2020

xgqfrms commented Oct 11, 2020 •

edited

Loading

xgqfrms commented Oct 11, 2020

xgqfrms commented Oct 11, 2020 •

edited

Loading

xgqfrms commented Oct 11, 2020

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 17, 2022 •

edited

Loading

xgqfrms commented Apr 17, 2022

xgqfrms commented Apr 17, 2022 •

edited

Loading

xgqfrms commented Apr 17, 2022

html5 download #11

html5 download #11

Comments

xgqfrms commented Nov 7, 2018

html5 download & js

xgqfrms commented Nov 7, 2018

download image & rename

xgqfrms commented Nov 7, 2018

download pdf & rename

xgqfrms commented Nov 7, 2018

xgqfrms commented Oct 11, 2020 • edited Loading

auto download images

xgqfrms commented Oct 11, 2020 • edited Loading

auto download icons

xgqfrms commented Oct 11, 2020

auto download logos

xgqfrms commented Oct 11, 2020 • edited Loading

html5 download all in one

xgqfrms commented Oct 11, 2020

xgqfrms commented Oct 11, 2020 • edited Loading

HTML5 download 执行条件

demo

same origin

xgqfrms commented Oct 11, 2020

HTML5 download Attribute

xgqfrms commented Apr 16, 2022 • edited Loading

xgqfrms commented Apr 16, 2022 • edited Loading

xgqfrms commented Apr 16, 2022 • edited Loading

Linux bash script 批量下载文件 All In One

xgqfrms commented Apr 16, 2022 • edited Loading

Node.js download remote cdn URL file

xgqfrms commented Apr 16, 2022 • edited Loading

attachment

xgqfrms commented Apr 16, 2022 • edited Loading

xgqfrms commented Apr 17, 2022 • edited Loading

Node.js 服务器控制浏览器下载文件还是预览文件 All In One

xgqfrms commented Apr 17, 2022

HTTP response status code & 206 Partial Content All In One

xgqfrms commented Apr 17, 2022 • edited Loading

HTML5 download 执行条件

xgqfrms commented Apr 17, 2022

just need to use HTML5 a tag download attribute

codepen live demo

update answer

download blob url file

refs

xgqfrms commented Oct 11, 2020 •

edited

Loading

xgqfrms commented Oct 11, 2020 •

edited

Loading

xgqfrms commented Oct 11, 2020 •

edited

Loading

xgqfrms commented Oct 11, 2020 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 16, 2022 •

edited

Loading

xgqfrms commented Apr 17, 2022 •

edited

Loading

xgqfrms commented Apr 17, 2022 •

edited

Loading

just need to use HTML5 `a` tag `download` attribute

`codepen` live demo

download `blob` url file