<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小小记事本</title>
<style>
* {
margin: 0 auto;
box-sizing: border-box;
color: #777777;
outline: none;
}
body {
background: #f5f5f5;
}
.main {
display: flex;
flex-direction: column;
max-width: 960px;
}
.container {
display: flex;
width: 100%;
margin: 5vh 0 1.5vh;
}
.title {
flex: 1;
font-size: 2em;
font-weight: 600;
padding-left: 16px;
white-space: nowrap;
}
.edit {
width: 100%;
min-height: 50vh;
padding: 16px;
font-size: 1.2em;
border: 1px dashed #ccc;
border-radius: 2px;
background: #fff;
}
button {
border: 1px solid #ccc;
padding: 0 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<div class="container">
<div class="title" contenteditable>编辑标题✏️</div>
<button id="btn">复制当前页 dataUrl</button>
</div>
<div class="edit" contenteditable>编辑这里开始.✏️</div>
</div>
<script>
function utf8_to_b64(str) {
return window.btoa(unescape(encodeURIComponent(str)));
}
// function b64_to_utf8(str) {
// return decodeURIComponent(escape(window.atob(str)));
// }
const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
const htmlContent = document.querySelector("html");
console.log(htmlContent.innerHTML);
const dataUrl = "<html>" + htmlContent.innerHTML + "</html>";
const base64 = utf8_to_b64(dataUrl);
// console.log(base64);
const inputValue = `data:text/html;base64,${base64}`
const input = document.createElement("input");
input.setAttribute("readonly", "readonly");
input.setAttribute("value", inputValue);
document.body.appendChild(input);
input.setSelectionRange(0, 9999);
input.select();
document.execCommand("copy");
document.body.removeChild(input);
alert('地址已复制。')
});
</script>
</body>
</html>