思路：a标签的download属性的使用
window.URL.createObjectURL（）生成DOMString的使用，参考文献：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

文本类本地下载（和服务端无交互）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <!-- <img class="grayscale" src="myPicture.png" alt="Description of my picture" /> -->
  8. </head>
  9. <body>
  10.     <script>
  11.         var file = new File(["i'm very happy beacuse i hava learn how to use js  "], "footxt", {type: "text/plain",});
  12.         var blob = new Blob(['ni hao '], { 'type': 'text\/xml' });
  13.         vetruLabel("a","exported.txt", blob);
  14.          function vetruLabel(lableName,FileName,fileContent){
  15.              var a = document.createElement(lableName);
  16.              //URL.createObjectURL() 静态方法会创建一个 DOMString,DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，
  17.              //所以DOMString 直接映射到 一个String 链接地址：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
  18.              a.href = window.URL.createObjectURL(fileContent);
  19.              a.innerText = '下载';
  20.              document.body.appendChild(a)
  21.              a.download = FileName;
  22.          }
  23.     </script>
  24. </body>
  25. </html>

图片类本地下载（和服务端无交互）

适用于服务端返回的是dataUrl格式的数据

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         function vetruLabel(lableName, FileName, fileContent) {
  13.             var a = document.createElement(lableName);
  14.             //URL.createObjectURL() 静态方法会创建一个 DOMString,DOMString 是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串，
  15.             //所以DOMString 直接映射到 一个String 链接地址：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
  16.             a.href = window.URL.createObjectURL(fileContent);
  17.             a.innerText = '下载';
  18.             document.body.appendChild(a)
  19.             a.download = FileName;
  20.         }
  21.         /**
  22.              *
  23.              * dataUrl转Bolb
  24.              * */
  25.         function dataURLtoBlob(dataurl) {
  26.             var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1],
  27.                 bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  28.             while (n--) {
  29.                 u8arr[n] = bstr.charCodeAt(n);
  30.             }
  31.             return new Blob([u8arr], { type: mime });
  32.         }
  33.         var blob = dataURLtoBlob('data:image/jpeg;base64,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');
  34.         vetruLabel("a", "exported.png", blob);
  35.     </script>
  36. </body>
  38. </html>

服务端交互需要的操作

上传数据

网络图像文件转Base64字符串

  1. /**
  2. *img 为dom元素
  3. **/ 
  4. function getBase64Image(img) {
  5.           var canvas = document.createElement("canvas");
  6.           canvas.width = img.width;
  7.           canvas.height = img.height;
  8.           var ctx = canvas.getContext("2d");
  9.           ctx.drawImage(img, 0, 0, img.width, img.height);
  10.           //获取图片的格式(png jpg)
  11.           var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
  12.           var dataURL = canvas.toDataURL("image/" + ext);
  14.           return dataURL;
  15.           }

Base64字符串转二进制

  1. /**
  2. *dataurl 为base64字符串
  3. **/
  4. function dataURLtoBlob(dataurl) {
  5.             var arr = dataurl.split(','),
  6.             mime = arr[0].match(/:(.*?);/)[1],
  7.             bstr = atob(arr[1]),
  8.             n = bstr.length,
  9.             u8arr = new Uint8Array(n);
  10.             while (n--) {
  11.             u8arr[n] = bstr.charCodeAt(n);
  12.             }
  13.             console.log(new Blob([u8arr], {
  14.             type: mime
  15.             }))
  16.             return new Blob([u8arr], {
  17.             type: mime
  18.             });
  19. }

下载并显示

base64设置到img标签显示

  1. document.getElementById('img').setAttribute('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');

JS字符串和二进制相互转换

string —> binary array

方法一

  1. var str = 'test string.';
  2. var arr = Array.prototype.map.call( str , function( c ) { return c.charCodeAt(0); } );

方式二

  1. const encoder = new TextEncoder()
  2. const view = encoder.encode('taowuhua,真帅')

binary array —> string

  1. String.fromCharCode.apply( null , arr );

数组转为字符串

方式一

  1. String(arr).replace(/,/g, "")

方式二

  1. arr.join("")

对象转字符串

  1. var obi = {'name':'taowuhua'}
  2. console.log(JSON.stringify(obi))

判断数组中是否存在某个值

如果存在返回数组元素的下标，否则返回-1

  1. let arr = ['apple', 'banana', 'fruit', 'origin'];
  2. let index = arr.indexOf('apple');

业余了解：https://blog.csdn.net/bigapple88/article/details/5601295?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase