无前后端，彻底无服务的网页版办公套件
source link: https://www.fly63.com/article/detial/12498
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
这是一个彻底无服务，易于分享的网页软件形式，它所有的内容都集中在Url数据中，所见即所得，不需要网络和注册安装，同时适配全平台，用户还能随时修改逻辑，没有的服务器成本。下面逐一分享给大家(https://github.com/zserge/awfice)，直接将代码复制到浏览器中即可访问。
文本编辑器
一个简单的富文本编辑器。输入任何你想要的，它不会被保存在任何地方，但它可能对快速一次性笔记很方便。您应该能够使用 Ctrl+B 和 Ctrl+I 将文本选择标记为粗体或斜体。撤消/重做也应该有效。您还可以从其他来源复制/粘贴文本和图像。
复制并添加到书签或在 URL 栏中打开：
data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+不使用base64，更简约的代码如下：
data:text/html;,<html contenteditable>双屏对照版：
data:text/html;text,<html><body style="display:flex"><div contenteditable style="flex:1;padding:5px"></div><div contenteditable style="flex:1;padding:5px"></div></body></html>代码编辑器
一个简单的代码编辑器。您可以输入 HTML、css 和 Javascript。
复制并添加到书签或在 URL 栏中打开：
data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%;}body{margin:0;}textarea{width: 33.33%;font-size:18px;padding:0.5em}</style><textarea placeholder="HTML" id="h"></textarea><textarea placeholder="CSS" id="c"></textarea><textarea placeholder="JS" id="j"></textarea><iframe id="i"></iframe><script>document.querySelectorAll("textarea").forEach((t)=>t.addEventListener("keydown",function(t){var e,s;"Tab"==t.key&&(t.preventDefault(),e=this.selectionStart,s=this.selectionEnd,this.value=this.value.substring(0,e)+" "+this.value.substring(s),this.selectionStart=this.selectionEnd=e+1)}))</script></body>一个简单的计算器，支持基本运算符号计算。
复制并添加到书签或在 URL 栏中打开：
data:text/html,<table style="text-align: center;width:80vw;margin: 0 auto;"><tbody><tr><td colspan="4"><textarea></textarea></td></tr></tbody><script>let d=document;let tbl=d.querySelector('tbody');let z=d.querySelector('textarea');let oc=(x)=>z.value+=x;let cl=()=>z.value='';let re=()=>{try{z.value=eval(z.value);}catch(error){cl();}};[[1,2,3,'+'],[4,5,6,'-'],[7,8,9,'*'],['C',0,'=','/']].forEach((a)=>{let r=d.createElement('tr');r.style.lineHeight='64px';tbl.appendChild(r);a.forEach((b)=>{let tb=d.createElement('tb');tb.innerText=b;tb.style.padding='16px';tb.style.border='1px solid';r.appendChild(tb);tb.onclick=b==='='?re:b==='C'?cl:()=>oc(b);})})</script></table>带有数学公式的非常基本的电子表格。它有 100 行和 26 列 (A..Z)。如果单元格中的值以“=”开头，则将其计算为公式。您可以参考其他单元格值，即“=(A10+A11)/A12”。在引擎盖下它使用 eval()，所以要小心。
复制并添加到书签或在 URL 栏中打开：
data:text/html,<table id=t><script>z=Object.defineProperty,p=parseFloat;for(I=[],D={},C={},q=_=>I.forEach(e=>{try{e.value=D[e.id]}catch(e){}}),i=0;i<101;i++)for(r=t.insertRow(-1),j=0;j<27;j++)c=String.fromCharCode(65+j-1),d=r.insertCell(-1),d.innerHTML=i?j?"":i:c,i*j&&I.push(d.appendChild((f=>(f.id=c+i,f.onfocus=e=>f.value=C[f.id]||"",f.onblur=e=>{C[f.id]=f.value,q()},get=_=>{v=C[f.id]||"";if("="!=v.charAt(0))return isNaN(p(v))?v:p(v);with(D)return eval(v.slice(1))},a={get},z(D,f.id,a),z(D,f.id.toLowerCase(),a),f))(document.createElement`input`)))</script><style>#t{border-collapse:collapse}td{border:1px solid gray;text-align:right}input{border:none;width:4rem;text-align:center}</style>绘图应用程序
没有什么比用鼠标在空白画布上绘图更简单的了。也适用于触摸屏。为了保存你的结果......好吧，也许做一个截图......
复制并添加到书签或在 URL 栏中打开：
data:text/html,<canvas id=v><script>d=document,d.body.style.margin=0,P="onpointer",c=v.getContext`2d`,v.width=innerWidth,v.height=innerHeight,c.lineWidth=2,f=0,d[P+"down"]=e=>{f=e.pointerId+1;e.preventDefault();c.beginPath();c.moveTo(e.x,e.y)};d[P+"move"]=e=>{f==e.pointerId+1&&c.lineTo(e.x,e.y);c.stroke()},d[P+"up"]=_=>f=0</script></canvas>只是带有一些热键的富文本编辑器的幻灯片。有 50 张空白幻灯片供您使用（我希望您不需要用更多的幻灯片来让您的观众感到厌烦）。每张幻灯片都是一个富文本编辑器，但有一些热键可以使样式更好：
- Ctrl+Alt+1：页眉
- Ctrl+Alt+2：普通样式
- Ctrl+Alt+3：左对齐
- Ctrl+Alt+4：居中对齐
- Ctrl+Alt+5：右对齐
- Ctrl+Alt+6：减少缩进
- Ctrl+Alt+7：缩进
- Ctrl+Alt+8：制作列表
复制并添加到书签或在 URL 栏中打开：
data:text/html,<body><script>d=document;for(i=0;i<50;i++)d.body.innerHTML+='<div style="position:relative;width:90%;padding-top:60%;margin:5%;border:1px solid silver;page-break-after:always"><div contenteditable style=outline:none;position:absolute;right:10%;bottom:10%;left:10%;top:10%;font-size:5vmin>';d.querySelectorAll("div>div").forEach(e=>e.onkeydown=e=>{n=e.ctrlKey&&e.altKey&&e.keyCode-49,f="formatBlock",j="justify",x=[f,f,j+"Left",j+"Center",j+"Right","outdent","indent","insertUnorderedList"][n],y=["<h1>","<div>"][n],x&&d.execCommand(x,!1,y)})</script><style>@page{size:6in 8in landscape}@media print{*{border:0 !important}}以下是来自 Google Bard 对其工作原理的解释：
浏览器URL中的代码data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+是一个data URI scheme。 它是一种将少量数据（例如文本、图像或 CSS）直接嵌入网页的方法。 这对于将小徽标或跟踪像素嵌入页面，或为无法加载外部资源的用户提供后备内容等非常有用。
数据 URI 方案由以下语法定义：
[< media type >][;base64],<data><media type> 是一个字符串，用于标识嵌入的数据类型。 <data> 是实际数据，以 base64 编码。
在您提供的示例中，<media type> 是 text/html，<data> 是简单页面的 HTML 代码。 此页面包含一个标题和一段文字。
当浏览器遇到数据 URI 时，它将解码 base64 数据，然后将其视为从外部资源加载的数据。 在这种情况下，浏览器将加载 HTML 代码并将其显示为网页。
数据 URI 是一种将少量数据嵌入网页的有用方法。 但是，应谨慎使用它们，因为它们会增加页面的大小并使其加载速度变慢。
以下是使用数据 URI 时需要牢记的一些额外事项：
数据 URI 的最大大小为 32KB。
并非所有浏览器都支持数据 URI。
数据 URI 可用于嵌入恶意代码。
如果您正在考虑使用数据 URI，请务必仔细权衡利弊。
妙吧！好活, 就得收藏支持一下。用活浏览器，都都玩出花来，你会发现很多好玩有趣的功能，简单又实用！
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK