js 下载文件遇到的问题

做 JS 文件下载时，后端传过来了二进制文件数据流，前端进行下载；
结果，一直下载虽然成功了，但是文件始终不对，下载图片，图片打不开，
下载pdf，pdf 也打不开；下载出问题时，都有个特点，下载后的文件比原始文件大一些。

其实，以前也好像遇到过类似的坑，当时是一个做后端的小伙伴提醒了一下，就解决了，但没有记录下来，导致重复踩坑。

经过分析，应该是很基础的东西，哪里没有设置正确；后端本来传过来的是二进制数据流，结果前端把 二进制数据流解析成字符串流，然后写入磁盘文件，文件当然就变大了，同时也坏掉了；解决方向就是，一定要把 HTTP 请求的response type 设置为 blob

export const downloadFileToLocal =(fileUrl: string, fileName: string)=>{
  downloadFile(fileUrl).then(resp => {
    const contentType = "image/png;charset=utf-8";
    // const blob = new Blob([resp], {type: contentType});
    const blob = new Blob([resp]);
    // FileSaver.saveAs(blob, fileName);
    const aLink = document.createElement('a');
    document.body.appendChild(aLink);
    aLink.style.display='none';
    const objectUrl = window.URL.createObjectURL(blob);
    aLink.href = objectUrl;
    aLink.download = fileName;
    aLink.click();
    URL.revokeObjectURL(aLink.href);
    document.body.removeChild(aLink);
  }).catch((error) => {
    console.log(error);
  });
};

canvas开发遇到的坑

昨天23/04/25，想让做好的canvas编辑功能，适应canvas不是全屏的情况，遇到一个问题：
pointerdown，事件回调函数的参数中的 clientX 和 clientY，始终不对，并且坐标越靠右，x坐标的偏差就越大；一开始比较觉得焦躁，邪门；也不好意思问其他同事，因为感觉这个问题应该是很基础的，很简单的，问了后会掉价；之后我通过使用原生 API，不使用任何第三方库，写一个最简单的测试例子，尝试复现这个问题。终于找到原因，是因为设置canvas 尺寸时，使用了css代码：

.my-canvas {
	width: calc(100vw - 300px);
	height: 90vh;
}

这会导致canvas的原始缩放不是（1，1），也就导致 clientX 和 clientY 的值，会应用这个缩放。
但是如果，这样设置canvas的尺寸，是不会改变canvas的原始缩放的

canvas.width = 800;
canvas.height = 600;

由于通过 js 来修改canvas 尺寸，来做窗口自适应，也可以，但相对css来说，还是很麻烦的。我还是想通过 css 来设置canvas 尺寸，解决办法是用一个 div 来装canvas，对这个div使用 css 样式，不直接对 canvas 应用 css，就可以解决问题

.full-size {
  width: 100%;
  height: 100%;
  background-color: #1890ff;
  display: flex;
}

.side-drawer {
  flex: 0 0 0px;
  height: 100vh;
  background-color: wheat;
}

.right-box {
  flex: 1 1 auto;
  height: 100vh;
}

right-box 应用到装 canvas的 div，之后 pixi.js 会自动让canvas充满它的父级div。
研究这个问题的过程中，还学到另一个知识点：
clientX 和 clientY 和实际的屏幕坐标对不上，也可能是window.devicePixelRatio导致的。比如，
当 window.devicePixelRatio == 2的屏幕上，点击了一下屏幕，通过截屏软件的测量，我确信这个点的真实坐标应该是 （200， 100），但是clientX 和 clientY 分别是 200 / window.devicePixelRatio 和 100 / window.devicePixelRatio , 即 （100， 50）