<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="252239" data-post-id="252239">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="ppiechota" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ppiechota/120/21484_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  ppiechota
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi <a class="mention" href="/u/evadne" rel="nofollow">@evadne</a>, thanks for the hint. I was just wondering, as someone with little JS experience, shall this URI be actually the URL to the saved report file in priv/static or maybe actual binary? I will dig into the docs you recommended. To be more clear, I’m following this guide: <a href="https://medium.com/@SergeyChechaev/elixir-phoenix-everyday-tips-create-xlsx-66cd70268eb4" rel="noopener nofollow ugc">Phoenix/Elixir — Export data to XLSX | by Sergey Chechaev | Medium</a>. My <code>ExcelController</code> is the same as his <code>PostController</code>, and I’m generating the report in memory in a view as well:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule FlipWeb.ExcelView do
  use FlipWeb, :view

  def render("report.xlsx", %{report: report}) do
    report
    |&gt; Elixlsx.write_to_memory("report.xlsx")
    |&gt; IO.inspect()
    |&gt; elem(1)
    |&gt; elem(1)
  end
end

</code></pre>
<p>So, the <code>push_event</code> would send the actual binary generated by <code>Elixlsx.write_to_memory("report.xlsx")</code> as URI ? Or should I materialize it as a file first and send URL?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="252239" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/with-liveview-what-is-best-way-to-download-a-file-to-the-users-browser/41550/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-252239" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="252239"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="252241" data-post-id="252241">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="evadne" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/evadne/120/13949_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  evadne
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Would urge consideration of how Phoenix applications usually work</p>
<p>For your situation would suggest the following</p>
<ul>
<li>write function in controller which serves content</li>
<li>generate path to this function via routes helper</li>
<li>push said URI</li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="252241" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/with-liveview-what-is-best-way-to-download-a-file-to-the-users-browser/41550/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-252241" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="252241"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="252243" data-post-id="252243">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="ppiechota" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ppiechota/120/21484_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  ppiechota
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Now I get it <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"> thanks!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="252243" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/with-liveview-what-is-best-way-to-download-a-file-to-the-users-browser/41550/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-252243" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="252243"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="279902" data-post-id="279902">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="riccardomanfrin" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/riccardomanfrin/120/23392_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  riccardomanfrin
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I also ended up with the first sequence of:</p>
<ul>
<li>a 1st modal form submit creates the content, pops up a second modal and hides itself.</li>
<li>In the second modal the link to download the content is rendered..<br>
Not sure how .. idiomatic this is .. and clearly requires 2 clicks.. but it works..</li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="279902" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/with-liveview-what-is-best-way-to-download-a-file-to-the-users-browser/41550/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-279902" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="279902"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="279954" data-post-id="279954">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="D4no0" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/D4no0/120/33624_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  D4no0
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I tend to open the download link in a new tab, this is a strategy I’ve seen used by a lot of platforms. You could even add some js so it closes automatically.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="279954" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/with-liveview-what-is-best-way-to-download-a-file-to-the-users-browser/41550/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-279954" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="279954"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="282712" data-post-id="282712">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Miserlou" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Miserlou/120/24973_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Miserlou
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Simplest solution for small dynamic content to be saved as files:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">{:noreply,
  socket |&gt; push_event("download-file", %{
    text: "Your file contents",
    filename: "#{:os.system_time(:millisecond)}.txt"
})
</code></pre>
<p>and on a Hook:</p>
<pre data-code-wrap="js"><code class="lang-js">    this.handleEvent("download-file", (event) =&gt; {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(event.text));
        element.setAttribute('download', event.filename);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
      });
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="282712" data-batch-url="/posts/batch_likers">
                        11
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/with-liveview-what-is-best-way-to-download-a-file-to-the-users-browser/41550/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-282712" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="282712"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="340743" data-post-id="340743">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Zurga" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Zurga/120/38832_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Zurga
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I used this method recently, but sending an Excel sheet over the websocket gave encoding errors. Instead of sending the file, I wrote it to “/tmp/special_folder/special_file” and created a static plug to serve files from that directory. Then I send the url to the resource over the websocket and set that as the “href” attribute.</p>
<p>So in endpoint.ex:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">plug Plug.Static,
  at: "/special_path/",
  from: "/tmp/special_path"
</code></pre>
<p>and then in the Hook:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">element.setAttribute('href', event.url)
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="340743" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/with-liveview-what-is-best-way-to-download-a-file-to-the-users-browser/41550/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-340743" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="340743"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="340784" data-post-id="340784">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Hermanverschooten" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Hermanverschooten/120/6447_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Hermanverschooten
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Now you can just do</p>
<pre data-code-wrap="html"><code class="lang-html">&lt;.link href={~p"/file/to-download"} download&gt;
  &lt;button type="button"&gt;Download&lt;/button&gt;
&lt;/.link&gt;
</code></pre>
<p>I used to have a custom event that added an invisible <code>iframe</code> to do this, but it is no longer necessary.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="340784" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/with-liveview-what-is-best-way-to-download-a-file-to-the-users-browser/41550/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-340784" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="340784"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #18"></div>
  </section>
</div>
    <div class="postbit" id="340888" data-post-id="340888">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Zurga" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Zurga/120/38832_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Zurga
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Yes, that is true, but I wanted the file to be sent on a form submit. Until forms support GET, I could not figure it out.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="340888" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/with-liveview-what-is-best-way-to-download-a-file-to-the-users-browser/41550/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-340888" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="340888"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #19"></div>
  </section>
</div>
    <div class="postbit" id="341493" data-post-id="341493">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cobra" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cobra/120/37381_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cobra
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>does this method apply to downloading music files?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="341493" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/with-liveview-what-is-best-way-to-download-a-file-to-the-users-browser/41550/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-341493" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="341493"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #20"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/41550/load_more?page=3">Load more posts (3 remaining)</a>
</div></template></turbo-stream>