Possible to pass javacript (file attachment download link) through an object?

Hi! First off, I want to complement you on this notebook. For someone who is new to the platform, this looks very impressive. As for sharing code on the forum, you can use “code blocks” to share code more effectively. You can do that by typing three backtick characters, and then a new line, and then your code:

For example, if you type this in a post:


```
let x = 42;
```

It will look like this

let x = 42;

Now on to your actual question: The problem is that your content cell is using plain strings (i.e. using " or ' quotes). Javascript will always interpret that as just text, and not any code to run. So then when you set the innerText of the element to that string, there is never any chance to run the code await FileAttachment(‘transfers.csv’).url().

This is easily fixed though. Change your content cell to use template strings, which are delineated with backticks. That should look something like this:

content = [
  {
    text: `<a href="${await FileAttachment('all exp by prj.csv').url()}" download>Funded projects.</a>`
  }
]

When you do that, you’ll noticed in the URL for the file attachment is integrated into the value of content immediately in the inspector. Here’s an example:

Unrelatedly, I noticed you imported a copy of d3. I’d recommend not doing this, since Observable notebooks have a built in copy of d3. You should just be able to delete that cell.

Finally, if I may proselytize a bit: I noticed you imported Vega Lite into this notebook. Vega Lite is 100% supported, and a fine library, but you might consider using Observable Plot. I find it a bit easier to work with that Vega Lite, but I may be biased.

2 Likes