如何阻止Quarto HTML报告中downloadthis按钮点击时跳转至页面顶部？

在Quarto生成的长HTML报告里，使用downloadthis包创建的下载按钮，点击时会触发浏览器自动跳转到页面顶部，Chrome和Firefox浏览器都存在这个问题。以下是几种可行的解决办法：

方法1：添加自定义JavaScript阻止默认跳转 #

downloadthis生成的按钮本质是带#锚点的<a>标签，点击时会触发默认的锚点跳转行为。我们可以通过JS拦截点击事件，阻止跳转同时保留下载功能：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 定位所有downloadthis生成的按钮容器
  const downloadContainers = document.querySelectorAll('.downloadthis');
  downloadContainers.forEach(container => {
    const link = container.querySelector('a');
    const form = container.querySelector('form');
    if (link && form) {
      link.addEventListener('click', function(e) {
        // 阻止默认的锚点跳转
        e.preventDefault();
        // 执行表单提交完成下载
        form.submit();
      });
    }
  });
});
</script>

将这段代码插入到Quarto文档的任意位置（比如文档末尾），渲染后点击按钮就不会再跳转到顶部。

方法2：修改downloadthis的按钮标签 #

把默认的<a>标签替换成<button>，从根源上避免锚点跳转。借助htmltools包可以轻松实现：

library(downloadthis)
library(htmltools)

# 生成原始下载按钮
dl_button <- mtcars %>%
  download_this(
    output_name = "mtcars data set",
    output_extension = ".csv",
    button_label = "Download data",
    button_type = "warning",
    has_icon = TRUE,
    icon = "fa fa-save"
  )

# 将<a>标签替换为<button>
modified_button <- tagReplaceAttribute(
  dl_button$children[[1]],
  name = "tag",
  oldValue = "a",
  newValue = "button"
)

# 输出修改后的按钮
modified_button

方法3：使用Quarto原生下载按钮（替代方案） #

如果不需要downloadthis的特定样式，也可以直接用HTML5的download属性创建下载按钮，完全避免跳转问题：

library(htmltools)

# 临时保存数据
temp_csv <- tempfile(fileext = ".csv")
write.csv(mtcars, temp_csv, row.names = FALSE)

# 创建原生下载按钮
tags$a(
  href = temp_csv,
  class = "btn btn-warning",
  tags$i(class = "fa fa-save"),
  " Download data",
  download = "mtcars data set.csv"
)

内容的提问来源于stack exchange，提问作者David Ranzolin