js 导出txt文件、blob流视频下载,window.open预览、打开、下载base64图片、pdf、文件

Blob流视频下载

upload(){
        // this.blob= new Blob([res.blob], {type:"video/mp4"});//从接口调用返回的
        let url = window.URL.createObjectURL(this.blob)
        console.log('url',url);
        let link = document.createElement('a')  //创建一个超链接元素
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '下载的文件名')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },

导出txt文件

	<button onclick="expt()">导出txt</button>
 	function expt(){
        savefiles('文件内容','文件名称.txt')
    }
    function savefiles(data,name){
        //Blob为js的一个对象,表示一个不可变的, 原始数据的类似文件对象,这是创建文件中不可缺少的!
        var urlObject = window.URL || window.webkitURL || window;
        var export_blob = new Blob([data]);
        var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = name;
        save_link.click();
    }

window.open预览、打开、下载base64图片、pdf、文件

	<button onclick="showOrDownload('data:image/jpeg;base64,4RK0RXhpZgAATU0AKgAAAAgADAEAAAMAAAA')">下载图片</button>
    <button onclick="showOrDownload('data:application/pdf;base64,4AAQSkZJRgABAQAA')">打开pdf</button>
 	function showOrDownload(base64String) {
        //这里截取后的fileHeader是data:image/jpeg
        var fileHeader = base64String.slice(0, base64String.indexOf(";base64"));
        //图片格式的imageType是image,所以就不用判断具体的图片类型了
        var imageType = fileHeader.slice(fileHeader.indexOf(":") + 1, fileHeader.indexOf("/"));
        if (imageType === 'image') {
            //图片下载
            this.base64StringToDownload(base64String);
            // 图片预览
            // this.showImage(base64String);
            return;
        }
        var fileType = fileHeader.slice(fileHeader.indexOf("/") + 1);
        if (fileType === 'pdf') {
            //pdf预览
            this.showPdf(base64String);
            return;
        }
        //其他类型文件只能下载
        this.base64StringToDownload(base64String);
    }
    function showImage(base64String) {
        const img = new Image();
        img.src = base64String;
        const newWin = window.open("", "_blank");
        newWin.document.write(img.outerHTML);
        newWin.document.title = "附件";
        newWin.document.close();
    }
    function showPdf(base64String) {
        var pdfResult = base64String;
        let pdfWindow = window.open("");
        pdfWindow.document.write("<iframe width='100%' height='100%' src=" + pdfResult + "></iframe>");
        pdfWindow.document.title = "附件"
        pdfWindow.document.close();
    }
    function base64StringToBlob(base64String) {
        var arr = base64String.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 Blob([u8arr], {type: mime});
    }
    function base64StringToDownload(base64String) {
        //生成唯一的文件名,长度可以自己定义
        const id = Number(Math.random().toString().substr(3, 5) + Date.now()).toString(36);
        let blob = this.base64StringToBlob(base64String);
        let url = URL.createObjectURL(blob)
        let save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
        save_link.href = url
        save_link.download = "附件" + id;
        save_link.click();
    }
### 实现微信浏览器中网页导出文件的功能 在微信环境中,由于其内置浏览器的安全策略限制,直接通过网页实现文件下载存在一定的困难。然而,可以通过特定的技术手段来绕过这些限制并实现文件导出预览功能。 #### 技术背景 微信内置浏览器并不支持直接调用系统的文件下载功能[^1]。这意味着任何试图通过 JavaScript 或其他前端技术触发文件下载的行为都会被阻止。因此,在这种环境下,通常需要借助外部浏览器或者利用微信自身的 API 来完成这一需求。 #### 解决方案概述 一种常见的解决方案是将用户重定向至外部浏览器以执行文件下载操作[^2]。这可以使用 `window.open` 方法实现,从而允许访问更广泛的系统级功能。另一种更为复杂的办法是在 Vue.js 或 Nuxt.js 的上下文中设计一套完整的机制用于处理不同类型的文件 (如 Word 文档、Excel 表格等),并通过适配器确保跨平台兼容性[^3]。 对于更加深入的需求比如小程序内部的操作,则可能涉及到与后端交互获取数据,并将其存储到设备上后再展示给用户的程[^4]。 以下是基于上述理论的具体实施步骤: #### 使用 Window.Open 导向外部链接 最简单的做法就是当检测到当前运行环境为微信客户端时自动开启新窗口加载目标 URL 地址: ```javascript if (/MicroMessenger/i.test(navigator.userAgent)) { window.open('https://example.com/download'); } ``` #### 利用 Blob 对象创建虚拟文件链接 如果希望保持用户体验畅而不跳出应用的话,也可以尝试构建一个临时性的二进制大对象(Blob)作为媒介传递所需资料内容: ```javascript function downloadFile(fileName, fileContent){ const blob = new Blob([fileContent], {type: 'application/octet-stream'}); if(window.navigator.msSaveOrOpenBlob){ // IE & Edge specific handling navigator.msSaveOrOpenBlob(blob, fileName); }else{ var elem = document.createElement('a'); elem.href = URL.createObjectURL(blob); elem.download = fileName; document.body.appendChild(elem); elem.click(); document.body.removeChild(elem); } } // Example usage with base64 encoded string as content downloadFile("test.pdf", atob("JVBERi0xLjQKJcfs...")); ``` 请注意这种方法仍然受限于各厂商各自的沙盒政策影响范围之内;某些情况下即使成功生成了可供点击使用的锚点标签也可能因为权限不足而失败。 #### 结合后端服务提供动态生成的内容 最后考虑把整个过程交给远程服务器负责——即先请求对应的资源项然后再依据实际情况决定下一步动作方向要么推送回客户端要么存放到本地缓存区等待进一步指示等等... 总之无论采取哪种途径都需充分考虑到实际应用场景下的特殊要求以及潜在风险因素等问题才行!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值