zoukankan      html  css  js  c++  java
  • 文件下载

    JS代码:
    var eleTextarea = document.querySelector('textarea');
    var eleButton = document.querySelector('input[type="button"]');
    
    // 下载文件方法
    var funDownload = function (content, filename) {
        var eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        // 字符内容转变成blob地址
        var blob = new Blob([content]);
        eleLink.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    };
    
    if ('download' in document.createElement('a')) {
        // 作为test.html文件下载
        eleButton.addEventListener('click', function () {
            funDownload(eleTextarea.value, 'test.html');    
        });
    } else {
        eleButton.onclick = function () {
            alert('浏览器不支持');    
        };
    }
    
    三、借助Base64实现任意文件下载
    
    var funDownload = function (domImg, filename) {
        // 创建隐藏的可下载链接
        var eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        // 图片转base64地址
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var width = domImg.natureWidth;
        var height = domImg.natureHeight;
        context.drawImage(domImg, 0, 0);
        // 如果是PNG图片,则context.toDataURL('image/png')
        eleLink.href = context.toDataURL('image/jpeg');
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
    };
    

      

      

    转自 张鑫旭大神 https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/

  • 相关阅读:
    camke中关于变量的一些知识
    ububtu16.04下安装protobuf
    ububtu下安装配置搜狗输入法
    anaconda资源链接
    把本地项目文件上传到github远程仓库的教程
    cmake practice一文中安装可执行文件的方法
    slam学习资源
    js中对String去空格
    去当前时间的周一
    对sql初始化的值的处理
  • 原文地址:https://www.cnblogs.com/qq735675958/p/9546350.html
Copyright © 2011-2022 走看看