web-frontend 相关问题

最近遇到一个问题，我写了如下HTML代码来实现文件下载：最近遇到一个问题，我写了如下HTML代码来实现文件下载： <div id="downloadLinkListEl"> <a href="./xlsx/test0.xlsx?t=1663997904033" target="_blank">test0</a> <a href="./xlsx/test1.xlsx?t=1663997904033" target="_blank">test1</a> <a href="./xlsx/test2.xlsx?t=1663997904033" target="_blank">test2</a> <a href="./xlsx/test3.xlsx?t=1663997904033" target="_blank">test3</a> </div> 以上所有文件的扩展名为.xlsx，可以用Microsoft Excel打开。在大多数浏览器中，代码可以按照我们的预期运行——点击超链接后，会打开一个新窗口，然后开始下载任务。然而，在Edge（Chromium）中，打开了两个窗口，第二个窗口将重定向到微软提供的Office在线查看器 - 这是我们意想不到的。其实这个问题可以通过修改Edge的默认设置来解决：设置中的“在浏览器中打开 Office 文件” 但是对于最终用户来说用户体验很糟糕。那么，在使用 Edge 时，有没有可能直接下载文件而不是重定向到 Office Online Viewer 的方法？我认为这可能与文件请求的响应头有关，因此，我尝试修改它。我使用nginx来托管excel文件。 TL；博士 server { server_name example.net; listen 80; location / { root /var/www/poc; index index.html index.htm index.php; } location /xlsx { root /var/www/poc; index index.html index.htm index.php; # Here are two headers I've added. add_header Content-Disposition "attachment"; add_header Content-Type "application/octet-stream"; } } 详情最初，nginx 没有额外的配置。因此，当我们访问 .xlsx 文件时，服务器将在 Content-Type 标头字段中使用其默认文件类型进行响应。喜欢： Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 也许这是解决这个问题的关键？ 🤔 所以我改变了它的默认值Content-Type与 add_header Content-Type "application/octet-stream"; 在 nginx 配置中。然后我发现这可能仍然不起作用 - 我不确定这是否是由于响应中存在两个 Content-Type 标头引起的。 Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet Content-Type: application/octet-stream 但是在我添加另一个标题后Content-Disposition与 add_header Content-Disposition "attachment"; 此问题不再出现，文件可直接下载。问题可能会得到解决吗？有件事还没弄清楚边界条件让Edge决定文件应该直接下载还是在在线查看器中打开。您最终是否找到了不需要最终用户采取任何步骤的解决方案？

html cross-browser microsoft-edge chromium web-frontend

回答 2 投票 0

使用 Reactjs 中的 useState setter 函数将数据数组添加到 useState 空数组

您好，我正在开发一个个人项目，我似乎无法将从后端获取的数据数组添加到 useState 数组，我可以看到该数组，但是当我尝试使用 useState 更新它时

reactjs frontend mern web-frontend

回答 1 投票 0

Headless UI Disclosure 渲染道具错误：“函数作为客户端组件的子组件无效。”

我尝试使用 Tailwind 组件库中的导航栏，但我使用 Headless UI 的方式有问题。我正在关注 https://headlessui.com/react/disclosure，但我不知道...

next.js web-frontend tailwind-ui headless-ui

回答 1 投票 0

TipTap Collaboration 在 Next.js 上不起作用？

问题：我有两个会话加载时传入了相同的 id 和令牌；但是，相同的文档尚未加载。会话协作所需的只是那些匹配的属性，对吗？