xgqfrms commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

xgqfrms commented 3 years ago

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 commented 3 years ago

auto download icons

xgqfrms commented 3 years ago

auto download logos

xgqfrms commented 3 years ago

html5 download all in one

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

xgqfrms commented 3 years ago

test

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

xgqfrms commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Content-Disposition 内容处置

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

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

xgqfrms commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

https://github.com/xgqfrms/HTML5/issues/11

xgqfrms commented 2 years ago

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 / HTML5

html5 download #11

html5 download & js

download image & rename

download pdf & rename

auto download images

auto download icons

auto download logos

html5 download all in one

HTML5 download 执行条件

demo

same origin

HTML5 download Attribute

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

Node.js download remote cdn URL file

attachment

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

HTTP response status code & 206 Partial Content All In One

HTML5 download 执行条件

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

`codepen` live demo

update answer

download `blob` url file

refs

xgqfrms / HTML5

html5 download #11

html5 download & js

download image & rename

download pdf & rename

auto download images

auto download icons

auto download logos

html5 download all in one

HTML5 download 执行条件

demo

same origin

HTML5 download Attribute

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

Node.js download remote cdn URL file

attachment

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

HTTP response status code & 206 Partial Content All In One

HTML5 download 执行条件

just need to use HTML5 a tag download attribute

codepen live demo

update answer

download blob url file

refs

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

`codepen` live demo

download `blob` url file