JS写文件的几种方法(浏览器内)

JS写文件的几种方法(浏览器内)

方法1、点击链接(不支持手机)方法2 调用requestFileSystem()方法(不支持手机)方法3、ActiveXObject(仅支持IE浏览器)

手机浏览器内核版本:chrome/79.0.3945.116 mobile)。

js运行在浏览器环境中时,就属于前端语言,浏览器出于安全限制,没有开放对应的主动写文件的接口,不然你上个网站,电脑里的文件都给人家删没了。

方法1、点击链接(不支持手机)

原理:模拟点击一个特殊链接(例如:http://www.w3.org/1999/xhtml),然后弹出下载框。

function doSave(value, type, name) {

var blob;

if (typeof window.Blob == "function") {

blob = new Blob([value], {

type: type

});

} else {

var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;

var bb = new BlobBuilder();

bb.append(value);

blob = bb.getBlob(type);

}

var URL = window.URL || window.webkitURL;

var bloburl = URL.createObjectURL(blob);

var anchor = document.createElement("a");

if ('download' in anchor) {

anchor.style.visibility = "hidden";

anchor.href = bloburl;

anchor.download = name;

document.body.appendChild(anchor);

var evt = document.createEvent("MouseEvents");

evt.initEvent("click", true, true);

anchor.dispatchEvent(evt);

document.body.removeChild(anchor);

} else if (navigator.msSaveBlob) {

navigator.msSaveBlob(blob, name);

} else {

location.href = bloburl;

}

}

var test = {

a: [1, 2],

b: [3, 4]

}

doSave(test, "text/latex", "hello.txt");

方法2 调用requestFileSystem()方法(不支持手机)

目前只支持chrome浏览器。 手机端:因为requestFileSystem()方法未定义,所以没法用; 电脑端:执行时会遇到SecurityError错误,解决:**–allow-file-access-from-files **

具体见 https://github.com/scscms/FileSystem

//兼容老版本chrome

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

var fileSystemObj = {

fs: null,//文件系统对象

size: 428800,//申请50M临时空间 50*1024*1024

errorHandler: function (e) {

//处理各种错误

console.log(e.name);

},

initialize: function () {

console.log("初始化");

//初始化

window.requestFileSystem(window.PERSISTENT, this.size, function (fs) {

fileSystemObj.fs = fs;

creatfile();

}, fileSystemObj.errorHandler)

}

};

if (window.requestFileSystem) {

navigator.webkitTemporaryStorage.queryUsageAndQuota(function (usage, quota) {

//usage已经使用的空间,quota申请的总空间

console.log(usage,quota);

if (!quota) {

//还没有申请过空间

navigator.webkitTemporaryStorage.requestQuota(fileSystemObj.size, function (grantedBytes) {

fileSystemObj.initialize();

}, fileSystemObj.errorHandler);

} else {

fileSystemObj.initialize();

}

});

}

function creatfile() {

fileSystemObj.fs.root.getFile('log6.xlsx', { create: true, exclusive: true }, function (fileEntry) {

console.log(fileEntry);//留意它的几个属性

console.log(fileEntry.toURL());

// 生成FileWriter对象

fileEntry.createWriter(function (fileWriter) {

fileWriter.onwriteend = function (e) {

console.log('写入完成');

};

fileWriter.onerror = function (e) {

console.log('写入失败: ' + e.toString());

};

//可以创建ArrayBuffer、Blob等对象写入文件,但不建议使用BlobBuilder弃用方法

fileWriter.write(new Blob(["something"], { type: "text/plain" }));

}, fileSystemObj.errorHandler);

}, fileSystemObj.errorHandler);

}

方法3、ActiveXObject(仅支持IE浏览器)

var fso;

try {

fso=new ActiveXObject("Scripting.FileSystemObject");

} catch (e) {

alert("当前浏览器不支持");

return;

}

var f1 = fso.createtextfile("C:\\1.txt",true);