jsZip
一个接口很明确的用 javascript 生成 zip 文件的库,它利用了标准浏览器的 data 协议
可以使得 javascript 生成的内容由用户保存到本地文件,但是由于作者主要处于英文环境下,对于其他语言文字比如中文考虑不太周全,可以在其首页实验一下中文文件名称和中文内容。
(firefox,safari可用, 注意下载文件须手动修改后缀名为 zip
)
分析其实现:
利用 javascript 中单个字符表示其他程序语言中的 byte 概念,zip格式的二进制控制字符以及整数通过\xyy编码到javascript字符串中,再利用base64编码对每三个字符所表示的二进制byte(charCode)编码为4个 base64编码
整数编码到字符串(字符数组 == byte数组)
原始代码用 eval 封装 byte 到字符,比较难看,我修改为 String.fromCharCode
JSZip.prototype.decToHex = function(dec, bytes)
{
var hex = "";
for(var i=0;i<bytes;i++) {
hex+=String.fromCharCode(dec&0xff);
dec=dec>>>8;
}
/*
for (var i = 0; i<bytes*2; i+=2)
{
var t = (dec >>> (i*4)) & 0xFF;
t = t.toString(16);
if (t.length != 2) t = "0"+t;
hex += eval("'\\x"+t+"'");
}*/
return hex;
};
再对字符数组进行 base64编码,利用charCode取出字符封装的原二进制byte数据
_keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode : function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
问题:
这里就存在一个问题,js中文中字符内部为2个字符(unicode表示),存储后和具体编码方式相关(utf-8,gbk),而不像英文一样无论(gbk,utf-8)可以视作一个byte,那么我们可以事先将js字符串中的中文字符手动拆解为目标编码 utf-8 表示的三个byte即三个字符,(之所以采用utf-8,而不是其他本地字符编码,encodeURIComponent可以方便得到中文的utf-8编码,而不需要采用外部工具) :
utf8Encode:function(input){
input=encodeURIComponent(input);
return this._transfer(input);
},
_transfer:function(input){
input=input.replace(/%.{2,2}/g,function(m){
var hex=m.substring(1);
return String.fromCharCode(parseInt(hex,16));
});
return input;
},
即将一个字符的utf-8表示的三个byte,封装到三个字符中去,每个字符的charcode表示原来字符utf-8编码的一个byte,这样子的话下面的 base64编码就可以像以前一样了。
演示:
注意目前只有 firefox,safari 稍微正常电
演示@google code
分享到:
相关推荐
在本资源"源代码-javascript生成PNG格式验证码下载.zip"中,我们聚焦的是如何使用JavaScript生成PNG格式的验证码。验证码(CAPTCHA)是防止机器人自动操作的一种安全机制,通常用于网页表单,以确保提交信息的是真实...
1. **预定义字符集**:为了生成URL友好的ID,Nanoid使用了一组包含字母和数字的字符集,这些字符在URL中是安全的,不会引起编码问题。 2. **算法选择**:Nanoid可能使用了类似于“雪崩效应”的算法,如XORShift或者...
在JavaScript编程领域,生成PNG图片是一项...综上所述,生成PNG图片涉及到JavaScript的Canvas API、图表库的使用以及编码问题的解决。通过理解这些知识点,开发者可以创建出丰富的数据可视化和动态图表,提升用户体验。
本资源“基于jquery_二维码生成和打印_兼容IE6-IE8_解决汉字乱码问题.zip”提供了一个解决方案,它使得在老旧的IE6-IE8浏览器上也能生成并打印包含汉字的二维码,这在很多情况下是非常实用的,因为这些老版本的IE...
本项目“TypeScript基于UniApp的二维码条形码生成.zip”提供了一个使用TypeScript语言和UniApp框架实现二维码与条形码生成的解决方案。下面将详细介绍相关知识点。 1. TypeScript: TypeScript 是 JavaScript 的超集...
4. **数据编码**:在生成二维码时,JavaScript需要将用户输入的文本数据按照QR码的编码规则进行处理,包括选择合适的纠错级别、确定数据模式等。 5. **DOM操作**:生成二维码后,JavaScript还会与HTML文档对象模型...
本实例是关于如何使用ASP(Active Server Pages)结合JavaScript来生成PNG格式的验证码,这将帮助开发者了解如何在Web应用中实现这种安全功能。 ASP是一种微软开发的服务器端脚本语言,它允许开发人员在HTML页面中...
在这个“二维码生成.zip”压缩包中,包含了一组用于生成二维码的简单工具和资源,非常适合那些需要快速生成二维码且不熟悉复杂编程的用户。 首先,我们看到有两个HTML文件,分别是“index-svg.html”和“index.html...
这个方法接收一个字符串参数`data`,代表要编码的数据,然后使用`ZXing.Net`库生成二维码图像,并以PNG格式返回。 4. **视图集成**: 创建一个视图(如`Generate.cshtml`)来显示生成的二维码。可以使用HTML和...
**jsPDF:JavaScript生成PDF的开源库** jsPDF是一个强大的JavaScript库,专为在Web浏览器环境中生成PDF文档而设计。这个库允许开发者使用纯JavaScript代码创建高质量、可下载的PDF文件,无需依赖任何服务器端技术。...
5. **图论算法**:在JavaScript中,可以使用邻接矩阵或邻接表表示图,并实现Dijkstra算法、Floyd-Warshall算法、Prim算法或Kruskal算法来解决最短路径、最小生成树等问题。这些算法在网络分析、路由计算等领域有广泛...
需要注意的是,使用这种后台生成图片的方式,可能涉及到跨域问题,因此需要正确配置服务器的CORS策略。同时,对于大量生成图片的场景,要考虑服务器性能和存储空间。 总结来说,`tool.zip` 后台生成 ECharts 图片...
总的来说,"form_生成表单.zip"是一个实用的工具,它将传统的手动编码过程转变为直观的可视化操作,降低了表单制作的门槛,提升了开发效率。对于那些需要频繁创建或修改表单的开发者而言,它无疑是一个值得尝试的...
在这个项目中,JavaScript负责处理用户输入的数据(文本或URL),将其编码成适合生成二维码的格式,并调用相应的库或API来创建二维码图像。例如,开发者可能使用了像`qrcode.js`这样的库,它提供了一种简单的API来...
因此,要解决中文乱码问题,我们需要引入能处理中文的字体和设置正确的字符编码。 1. 引入字体资源:为了使jspdf支持中文,我们需要引入一个包含中文字符的字体。一种常见的方式是使用开源的“simSun”字体,这是一...
当每一步完成后,可以使用JavaScript生成代表这一步骤状态的图片,如完成、未完成的小图标。这些图标可以通过Canvas或SVG生成,然后用作步骤条上的标记,增强视觉效果和用户体验。 4. 实际应用: - 图片生成服务:...
【标题】"jq微信二维码生成.zip"所涉及的是一个基于jQuery的微信二维码生成工具,它允许用户快速便捷地创建文本、URL或名片二维码,而无需通过API接口进行调用,直接处理后台传递的数据。 在二维码生成的技术领域,...
总的来说,"js二维码生成4种不同二维码.zip"这个资源为开发者提供了一种实践JavaScript二维码生成技术的途径,包括了基本的文本、URL编码,以及更高级的图片和自定义样式二维码。在实际应用中,开发者可以根据需求...
本压缩包"HTML5二维码在线生成代码.zip"包含了一个能够自定义二维码参数的工具,比如设置URL地址、二维码的纠错级别以及颜色方案。 首先,我们要理解HTML5的Canvas API。Canvas是一块可以进行图形绘制的区域,通过...
- **字符串操作**:在生成条形码之前,需要将数据转化为适合条形码编码的格式。 - **面向对象编程**:可能涉及到使用PHP类来实例化条形码生成器对象,并调用其方法来生成条形码图像。 - **图像处理**:生成的条形码...