【问题标题】:Quarto Book Download button四开本下载按钮
【发布时间】:2023-01-09 16:28:09
【问题描述】:

使用bookdown,我们可以从下载按钮下载不同的文件格式,例如

---
bookdown::gitbook:
   download:
      - ["test.pdf", "PDF File"]
      - ["test.html", "HTML File"]
      - ["test.csv", "Data test.csv"]
---

在四开本中,我们只有 options 用于下载:(pdf、epub 和 docx 中的一个或多个)。有人知道如何通过下载按钮将数据(例如.csv.qs)包含在导航栏或侧边栏上吗?

编辑 1:在@shafee 的精彩回答之后,这是我的书目前的样子,以及我想添加下载数据选项的位置。

通过单击向下箭头,将打开一个下拉菜单,我想在其中添加选项(最佳选择不止一个,即许多数据集)“下载数据”。这是一个例子.yml

---
project:
  type: book
  
book:
  title: "Quarto Book"
  chapters:
    - index.qmd
    - intro.qmd
       
  sidebar:
    pinned: true
    
  repo-url: https://www.rstudio.com/   
  search: 
    location: sidebar
    type: textbox
  downloads: [pdf, epub]
    
format:
  html:
   # include-after-body: custom.html
    theme: cosmo
---

编辑 2: 可以使用 sidebar 中的 tools 选项。也许有人知道如何为数据正确生成 URL,以便直接下载。

  sidebar:
    pinned: true
    tools:
      - icon: save
        menu:
          - text: Data XLSX
            url:  ymlthis::yml_params_code(browseURL('data/mtcars.xlsx'))
          - text: Data CSV
            url:  ymlthis::yml_params_code(browseURL('data/mtcars.csv'))

【问题讨论】:

    标签: r quarto


    【解决方案1】:

    更新的答案(对应于 OP 的第二次编辑)

    这个概念保持不变。在这里,我们只是用创建的按钮替换工具下的那些菜单项索引.qmd使用 javascript 的文件。

    如果需要添加更多csvxlsx数据,只需在.download_btnpandoc div中添加相应的创建按钮的代码,并在_quarto.yml文件中添加更多- text: ""url: "#"即可。


    _四开本.yml

    project:
      type: book
    
    book:
      title: "Quarto Book"
      author: "Jane Doe"
      date: "9/29/2022"
      chapters:
        - index.qmd
        - intro.qmd
    
      downloads: [pdf, epub]
      sidebar:
        pinned: true
        tools:
          - icon: save
            menu:
              - text: ""
                url:  "#"
              - text: ""
                url:  "#"
              - text: ""
                url:  "#"
                
      repo-url: https://www.rstudio.com/   
      search: 
        location: sidebar
        type: textbox
    
    format:
      html:
        include-after-body: custom.html
        theme: cosmo
    

    索引.qmd

    # Preface {.unnumbered}
    
    This is a Quarto book.
    
    
    ::: {.download_btn}
    
    ```{css}
    #| echo: false
    
    .btn-default,
    .btn-default:hover,
    .btn-default:active {
      font-size: 20px;
      color: black;
      background-color: transparent;
      border-color: transparent;
    }
    
    .btn-default:hover {
      color: grey;
      transition: 0.2s;
    }
    
    ```
    
    
    ```{r}
    #| echo: false
    
    library(downloadthis)
    
    mtcars %>%
      download_this(
        output_name = "mtcars data set",
        output_extension = ".csv",
        button_label = "mtcars.csv",
        button_type = "default",
        has_icon = TRUE,
        icon = "fa fa-file-csv"
      )
    ```
    
    
    ```{r}
    #| echo: false
    
    iris %>%
      download_this(
        output_name = "Iris data set",
        output_extension = ".csv",
        button_label = "iris.csv",
        button_type = "default",
        has_icon = TRUE,
        icon = "fa fa-file-csv"
      )
    ```
    
    ```{r}
    #| echo: false
    
    palmerpenguins::penguins %>%
      download_this(
        output_name = "penguins data set",
        output_extension = ".csv",
        button_label = "penguins.csv",
        button_type = "default",
        has_icon = TRUE,
        icon = "fa fa-file-csv"
      )
    ```
    
    :::
    
    

    自定义.html

    
    <script>
    var all_btns = document.querySelectorAll(".download_btn a");
    var data_nav = document.querySelectorAll('[aria-labelledby="sidebar-tool-dropdown-0"] li')
    
    for (let i = 0; i < data_nav.length; i++) {
      let li = document.createElement("li");
      li.appendChild(all_btns[i]);
      data_nav[i].parentElement.replaceChild(li, data_nav[i])
    }
    
    </script>
    


    旧答案

    由于到目前为止,Quarto 没有默认选项来添加用于下载csv 数据的按钮,作为解决方法,我们可以在{downloadthis} R 包的帮助下并使用几行 javascript 代码在 Book 导航栏中添加一个下载按钮.

    所以首先,在索引.qmdecho: false 归档。

    索引.qmd


    # Preface {.unnumbered}
    
    This is a Quarto book.
    
    ::: {.download_btn}
    
    ```{css}
    #| echo: false
    
    .btn-default,
    .btn-default:hover,
    .btn-default:active {
      font-size: 24px;
      padding: 0px;
      margin-top: -5px;
      color: white;
      background-color: transparent;
      border-color: transparent;
    }
    
    .btn-default:hover {
      color: whitesmoke;
      transition: 0.2s;
    }
    
    ```
    
    
    ```{r}
    #| echo: false
    
    library(downloadthis)
    
    mtcars %>%
      download_this(
        output_name = "mtcars data set",
        output_extension = ".csv",
        button_label = "",
        button_type = "default",
        has_icon = TRUE,
        icon = "fa fa-file-csv"
      )
    ```
    
    :::
    
    

    现在默认情况下,该按钮将在索引页的书体中创建。但是我们希望在书的导航栏中有这个。为此,我们可以在导航栏的右侧添加一个 save iconhref: "#" 作为占位符,然后使用 javascript 我们可以用我们创建的下载按钮替换这个保存图标。

    现在添加js代码,创建一个html文件自定义.html并将这些代码行放入该文件中,然后添加自定义.html_quarto.yml 中用include-after-body: custom.html 归档。

    自定义.html


    <script>
    
    var btn = document.querySelector(".download_btn");
    var nav = document.querySelector(".navbar-nav .bi-save");
    nav.parentElement.replaceChild(btn, nav);
    
    </script>
    
    

    _四开本.yml


    project:
      type: book
      
    book:
      title: "Quarto Book"
      chapters:
        - index.qmd
        - intro.qmd
      navbar:
       right: 
         - icon: save
           href: "#"
        
    format:
      html:
        include-after-body: custom.html
        theme: cosmo
    
    

    现在呈现的书籍导航栏看起来像,



    请参阅 downloadthis package documentation 以了解添加按钮以下载 csvxlsx 文件或任何 R 对象作为 rds 文件的各种选项,并了解如何设置按钮样式。

    免责声明:我只是一个 R 用户,只知道一点点 javascript。所以任何人,请随时使用更高效的 js 代码编辑此答案。:-)

    【讨论】:

    • 感谢您抽出宝贵时间,您的回答有效,但我想知道我们是否可以控制下载位置,使其也适用于下拉菜单 - 请参阅我的编辑。
    • 我认为这样做会更复杂。而且它已经够复杂了:)。
    • 也许您的解决方案是其他可能知道如何实现的人的起点。最后我的问题是我有几个数据集可供用户下载。尽管如此,还是很好的答案,感谢您回答这么多 Quarto 和 RMarkdown 问题:)
    • 是也不是 :D 我更喜欢下拉菜单,这样用户可以决定要下载的特定文件,而不是所有文件。但这可能是一种妥协,感谢您的建议!
    • 查看更新的答案。 :D
    【解决方案2】:

    没有外部包的解决方案与我的第二次编辑非常相似(假设数据存储在文件夹data中:

      sidebar:
        pinned: true
        tools:
              - icon: save
                menu:
                  - text: Data XLSX
                    url:  "data/mtcars.xlsx"
                  - text: Data CSV
                    url:  "data/mtcars.csv"
    

    【讨论】:

      猜你喜欢
      • 2023-01-24
      • 2018-03-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-19
      • 1970-01-01
      • 2022-06-27
      • 1970-01-01
      相关资源
      最近更新 更多