# Franklin: render csv file in new browser tab

**URL:** <https://discourse.julialang.org/t/franklin-render-csv-file-in-new-browser-tab/74922>\
**Category:** General Usage\
**Tags:** csv, franklin\
**Created:** [January 20, 2022, 10:17am UTC](https://discourse.julialang.org/t/franklin-render-csv-file-in-new-browser-tab/74922 "2022-01-20T10:17:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![paradoxical-rhapsody](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/paradoxical-rhapsody/32/33021_2.png) [@paradoxical-rhapsody](https://discourse.julialang.org/u/paradoxical-rhapsody)\
**Post date:** [January 20, 2022, 10:17am UTC](https://discourse.julialang.org/t/franklin-render-csv-file-in-new-browser-tab/74922/1 "2022-01-20T10:17:09Z")

</div>

Using [Franklin](https://franklinjl.org/), I have created a static site. Now I would like to add a link to a CSV file, writen as `[data file](example.csv)` in markdown, in page `home/dataexpo`.

The normal usage of `[data file](example.csv)` leads to download the file. The desirable action when clicking this link is to render the data content in CSV file in a new browser tab with a plain format rather than download this CSV file. How do I achieve this action?

Below is a toy CSV data:

```julia
ID, Policy, Cost
123,1,100
124,1,2400
125,3,350
126,4,8000

```

---

<div class="post-metadata">

**Author:** ![paradoxical-rhapsody](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/paradoxical-rhapsody/32/33021_2.png) [@paradoxical-rhapsody](https://discourse.julialang.org/u/paradoxical-rhapsody)\
**Post date:** [January 20, 2022, 10:36am UTC](https://discourse.julialang.org/t/franklin-render-csv-file-in-new-browser-tab/74922/2 "2022-01-20T10:36:24Z")

</div>

@ [tlienart](https://discourse.julialang.org/u/tlienart)

---

<div class="post-metadata">

**Author:** ![tlienart](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tlienart/32/7640_2.png) [@tlienart](https://discourse.julialang.org/u/tlienart)\
**Post date:** [January 20, 2022, 12:15pm UTC](https://discourse.julialang.org/t/franklin-render-csv-file-in-new-browser-tab/74922/3 "2022-01-20T12:15:26Z")

</div>

if you have a `.csv` asset somewhere and link to it, it’s the browser that will define how to handle that asset; as far as I’m aware all browsers will offer to download the raw file.

However what you want to achieve should not be too difficult to do, you can generate a HTML page with content corresponding to that CSV. For instance this HTML does the job:

```julia
<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width-device-width, initial-scale=1.0">
	<title>The CSV</title>
</head>

<body>

<pre><code>ID, Policy, Cost
123,1,100
124,1,2400
125,3,350
126,4,8000</code></pre>

</body>

</html>

```

So you could have that HTML in your website folder, call it `foo_csv.html` and it will be available at `your_base_url/foo_csv/`.

To open things in a new tab, it’s [not a recommended thing to do](https://css-tricks.com/use-target_blank/) and markdown links won’t do that but you can always insert raw HTML that do with

```markdown
Open the CSV in a new tab: ~~~<a href="/foo_csv/" target="_blank">the link</a>~~~

```

Last comment: in the page HTML above you could have put

```julia
<pre><code>{{insert path/to/the/csv.csv}}</code></pre>

```

and Franklin will insert the content of the CSV there; note that the path is relative to the `_layout` folder so for instance if you put the CSV in `_assets/thecsv.csv` then it would be `{{insert ../_assets/thecsv.csv}}`.

Hope this helps

---

<div class="post-metadata">

**Author:** ![paradoxical-rhapsody](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/paradoxical-rhapsody/32/33021_2.png) [@paradoxical-rhapsody](https://discourse.julialang.org/u/paradoxical-rhapsody)\
**Post date:** [January 21, 2022, 1:15am UTC](https://discourse.julialang.org/t/franklin-render-csv-file-in-new-browser-tab/74922/4 "2022-01-21T01:15:56Z")

</div>

Thank you for this effective solution.