크롬의 또 다른 작은 창문에 Excel po 책갈피 보이기
13730 단어 ChromeJavaScript초학자bookmarklettech
0. 시작
GiitHub에서 Excel과 유사한 JavaScript 라이브러리 발견
myliang/x-spreadsheet: A web-based JavaScript（canvas） spreadsheet
가끔 크롬에서 웹 사이트를 보면서 필기를 해요.
필기만 하는 것이 아니라, 때로는 합계하여 계산하고 싶을 때도 있다.
때로는 계산 결과를 저장하고 싶을 때도 있고, 때로는 과거의 계산 결과를 확인하고 싶을 때도 있다.
그래서 간단하게 계산할 수 있는 크롬의 작은 창문을 원합니다.
이렇게 되고 싶다는 느낌.
책갈피는 쉬울 것 같아서 만들었어요
책갈피/북마크렛 만드는 법-catch.jp-wiki
1. 제작, 사용
● 로컬 파일을다운로드,선택해서읽기,쓰기가능
var hhh='<html>'+
'<title>エクセルみたいの</title>'+
'<head>'+
'<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.css">'+
'<script src="https://unpkg.com/x-data-spreadsheet/dist/xspreadsheet.js"></script>'+
'</head> '+
'<body>'+
' <button id="sv">ダウンロード</button>'+
' <input type="file" id="ld" name="file"/ accept="text/*">'+
' <div id="xspreadsheet"></div> '+
'<script>'+
' const s = x_spreadsheet("#xspreadsheet")'+
' .change(data => {'+
' console.log(data);'+
' }); '+
'var sv = document.getElementById("sv");'+
'sv.addEventListener("click",function(){'+
' var data1 = s.getData();'+
' let blob = new Blob([JSON.stringify(data1)]);'+
' let blobURL = window.URL.createObjectURL(blob);'+
' let a = document.createElement("a");'+
' a.href = blobURL;'+
' a.download="xldata.txt";'+
' document.body.appendChild(a);'+
' a.click();'+
' a.parentNode.removeChild(a); '+
'}); '+
'var ld = document.getElementById("ld");'+
'ld.addEventListener("change",function(e){'+
' var result = e.target.files[0];'+
' var reader = new FileReader();'+
' reader.readAsText( result );'+
' reader.addEventListener( "load", function() { s.loadData(JSON.parse(reader.result)); }) '+
'}); '+
'</script>'+
'</body>'+
'</html>';
var win = window.open('','','width=560,height=440');
win.document.write(hhh);
책갈피로 변환된 WEB 서비스
스크립트 변환
변환된 JavaScript
javascript:var hhh%3D'<html>'%2B '<title>エクセルみたいの<%2Ftitle>'%2B '<head>'%2B '<link rel%3D"stylesheet" href%3D"https%3A%2F%2Funpkg.com%2Fx-data-spreadsheet%2Fdist%2Fxspreadsheet.css">'%2B '<script src%3D"https%3A%2F%2Funpkg.com%2Fx-data-spreadsheet%2Fdist%2Fxspreadsheet.js"><%2Fscript>'%2B '<%2Fhead> '%2B '<body>'%2B ' <button id%3D"sv">ダウンロード<%2Fbutton>'%2B ' <input type%3D"file" id%3D"ld" name%3D"file"%2F accept%3D"text%2F*">'%2B ' <div id%3D"xspreadsheet"><%2Fdiv> '%2B '<script>'%2B ' const s%3Dx_spreadsheet("%23xspreadsheet")'%2B ' .change(data%3D>%7B'%2B ' console.log(data)%3B'%2B '%7D)%3B'%2B 'var sv%3Ddocument.getElementById("sv")%3B'%2B 'sv.addEventListener("click"%2Cfunction()%7B'%2B ' var data1%3Ds.getData()%3B'%2B ' let blob%3Dnew Blob(%5BJSON.stringify(data1)%5D)%3B'%2B ' let blobURL%3Dwindow.URL.createObjectURL(blob)%3B'%2B ' let a%3Ddocument.createElement("a")%3B'%2B ' a.href%3DblobURL%3B'%2B ' a.download%3D"xldata.txt"%3B'%2B ' document.body.appendChild(a)%3B'%2B ' a.click()%3B'%2B ' a.parentNode.removeChild(a)%3B'%2B '%7D)%3B'%2B 'var ld%3Ddocument.getElementById("ld")%3B'%2B 'ld.addEventListener("change"%2Cfunction(e)%7B'%2B ' var result%3De.target.files%5B0%5D%3B'%2B ' var reader%3Dnew FileReader()%3B'%2B ' reader.readAsText(result)%3B'%2B ' reader.addEventListener("load"%2Cfunction()%7Bs.loadData(JSON.parse(reader.result))%3B%7D)'%2B '%7D)%3B'%2B '<%2Fscript>'%2B '<%2Fbody>'%2B '<%2Fhtml>'%3Bvar win%3Dwindow.open(''%2C''%2C'width%3D560%2Cheight%3D440')%3Bwin.document.write(hhh)%3Bvoid(0);
2. 끝
끝맺다
Reference
이 문제에 관하여(크롬의 또 다른 작은 창문에 Excel po 책갈피 보이기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/white/articles/1235821257c55d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
