dataURL转换txt 预览与下载

最新推荐文章于 2022-09-25 19:42:58 发布

汉堡哥·尼古拉斯

最新推荐文章于 2022-09-25 19:42:58 发布

阅读量1.1k

点赞数 1

分类专栏：个人笔记文章标签： js dataURL转txt txt下载

个人笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

有个需求是后端传二进制编码前端实现预览和下载，所以在网上拼凑了这个demo


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
  <input type="file" onchange="jsReadFiles(this.files)"/>
</body>
<script type="text/javascript">
function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {
    type: mime
  });
}
var file24324 = dataURLtoFile('data:text/plain;base64,eGluY2h1bg==', 'test.txt');
//js 读取文件
function jsReadFiles(files) {
  if (files.length) {
    var file = files[0];
    readBlobAsDataURL(file, function(dataurl) {
      console.log(dataurl);
    });
    var reader = new FileReader(); //new一个FileReader实例
    if (/text+/.test(file.type)) { //判断文件类型，是不是text类型
      reader.onload = function() {
        $('body').append('<pre>' + this.result + '</pre>');
      }
      reader.readAsText(file);
    } else if (/image+/.test(file.type)) { //判断文件是不是imgage类型
      reader.onload = function() {
        $('body').append('<img src="' + this.result + '"/>');
      }
      reader.readAsDataURL(file);
    }
  }
}

function readBlobAsDataURL(blob, callback) {
  var a = new FileReader();
  a.onload = function(e) {
    callback(e.target.result);
  };
  a.readAsDataURL(blob);
}

function jsReadFiles1(files) {
  var reader = new FileReader(); //new一个FileReader实例
  reader.onload = function() {
    $('body').append('<pre>' + this.result + '</pre>');
  }
  reader.readAsText(files);
}
console.log(file24324)
let data = jsReadFiles1(file24324)
downLoadFile(file24324)

function downLoadFile(data) {
  let url = window.URL.createObjectURL(data); //表示一个指定的file对象或Blob对象
  console.log(url, "看一下这是啥")
  let a = document.createElement("a");
  document.body.appendChild(a);
  // let fileName = msg.headers["content-disposition"].split(";")[1].split("=")[1]; //filename名称截取
  a.href = url;
  a.download = 'test.text'; //命名下载名称
  a.click(); //点击触发下载  
  window.URL.revokeObjectURL(url); //下载完成进行释放
}
</script>
</html>