一些有趣的东西-20220522

2022-05-22

搞一个小东西的时候遇到的几个有意思的点，写一写。

1.document.getElementByXX这个操作取元素(应该)是从DOM树上取而非渲染树，它是可以取到display: none的元素的(测试环境：最新版Chrome)

2.如果需要将输入框的文本存到本地文件，可以通过创建一个a标签并将字符串转为Blob格式(二进制流)，然后将Blob格式的对象转为url附加到a标签上，再触发a标签的点击事件即可实现文件保存，代码如下

/**
 * @param {String} content 输入文本
 * @param {String} fileName 文件名
 * @param {String} ext 文件扩展名, 输出文件为 fileName.ext
 */
function saveFile(content:string, fileName: string, ext:string = 'txt') {
  const link:HTMLAnchorElement = document.createElement('a');
  link.download = `${fileName?fileName:content.slice(0, 5)}.${ext}`;
  link.style.display = 'none';
  const blob = new Blob([content]);
  link.href = URL.createObjectURL(blob);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

3.同理，如果需要上传文件，并且不想用原生<input type="file"/>的样式，也可以使用以上方法，代码如下

// input标签的onChange事件处理函数
function upload(e: ChangeEvent<HTMLInputElement>) {
  const { files } = e.target;
  const file = files?.[0];
  if (!file || file.split('.')[1] !== 'md') return; // 如果文件不存在或者类型不合要求
  file.text().then(text => {
    console.log(text); // 打印文件内容
  })
}
// 将这个函数作为button的onClick事件或者其他较易设计样式的标签的onClick事件,即可实现自定义上传按钮(原生表单元素的样式比较难修改,故不直接使用input标签)
function uploadFile() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '.md'; // 文件类型限制
  input.style.display = 'none';
  // 添加事件监听,否则即使上传了文件也拿不到文件内容
  input.addEventListener('change', (e: Event) => {
    // Event不能直接断言成ChangeEvent类型,所以需要用unknown或者any转换一下
    upload(e as unknown as ChangeEvent<HTMLInputElement>)
  })
  document.body.appendChild(input);
  input.click();
  document.body.removeChild(input);
}