文本四开本中的下载按钮

Question

例如，我希望在 pdf 或 csv 文档的句子中间有一个下载按钮。这意味着句子中应该有一个小按钮，建议您可以下载文档，而不是在导航或侧栏中。这是一些可重现的代码：

---
title: "Download button in text Quarto"
format: 
  html:
    code-fold: true
engine: knitr
---

I would like to have a download button [here]() for pdf or CSV document for example.

我不确定是否可以使用downloadthis包在句子中实现一个干净的按钮，因为它应该位于带有文本的句子的中间。

Answer 1

更新

我创建了 quarto 短代码扩展downloadthis，它提供了一个短代码来更轻松地嵌入下载按钮（与我的旧答案相比），并且不需要使用 R 包（但当然，这个扩展的灵感来自{downloadthis}）

因此，安装该短代码后，我们可以使用该短代码，如下所示，

---
title: "Download button in text Quarto"
format: 
  html:
    css: style.css
engine: knitr
---

The following button is a download button for matcars data {{< downloadthis mtcars.csv
label="Download data" dname=mtcars id=mtcars-btn >}}  You can download the mtcars data as csv file by clicking on it. 

样式.css

#mtcars-btn {
     font-size: xx-small;
     padding: 0.2rem 0.3rem !important;
   }

#down-btn {
 margin-right: 2px;
 margin-left: 2px;
}

a:has(#mtcars-btn) {
 text-decoration: none !important;
}

在这里探索更多选项和现场演示。

旧答案

使用一点 CSS 和 javascript，就可以很容易地做到这一点。

---
title: "Download button in text Quarto"
format: 
  html:
    code-fold: true
    include-after-body: add_button.html
engine: knitr
---


```{r}
#| echo: false

library(downloadthis)

mtcars %>%
  download_this(
    output_name = "mtcars dataset",
    output_extension = ".csv",
    button_label = "Download data",
    button_type = "default",
    self_contained = TRUE,
    has_icon = TRUE,
    icon = "fa fa-save",
    id = "mtcars-btn"
  )
```


The following button is a download button for matcars data <span id="down-btn"></span> You can download the mtcars data as csv file by clicking on it. 

添加按钮.html

<style>
   #mtcars-btn {
     font-size: xx-small;
     padding: 0.2rem 0.3rem !important;
   }
   
   #down-btn {
     margin-right: 2px;
     margin-left: 2px;
   }
   
   a:has(#mtcars-btn) {
     text-decoration: none !important;
   }

   #mtcars-btn:focus,
   #mtcars-btn:active  {
      box-shadow: none !important;
   }
   
   #mtcars-btn:hover {
     transition: 0.2s;
     filter: brightness(0.90);
   }
   
   #mtcars-btn:active {
     filter: brightness(0.80);
   }
   
</style>


<script>
  function add_button() {
    /* get the R generated button by its id */
    let mtcars_btn = document.querySelector("a:has(#mtcars-btn)");
    mtcars_btn.href = '#mtcars-btn';
    
    /* get the placeholder where you want to put this button */
    let down_btn = document.querySelector("span#down-btn");
    
    /* append the R generated button to the placeholder*/
    down_btn.appendChild(mtcars_btn)
  }
  
  window.onload = add_button();
</script>

解释

所以我在这里做了什么

• 首先，使用downloadthiswith创建了一个下载按钮，这样我们就可以使用这个id 选择器id=mtcars-btn通过 js 代码获取这个生成的按钮#mtcars-btn

• 然后使用 在段落文本内创建一个占位符<span></span>，我希望下载按钮位于其中，并且在本例中，down-btn为该按钮分配了一个 id span，以便我们可以span使用来定位它#down-btn。

• 然后使用 js，简单地将生成的下载按钮附加到占位符span标记中，以便该按钮位于我们想要的位置。

• 最后，使用一些 CSS 使该按钮变小，减少按钮填充，创建一点左右边距并删除下划线。

就是这样！