How to download new version of file without using the client cache?

Question

I have page where I have table with users data and each row (each user has their own business card which is a tag that reference to pdf that is stored on server.

   <td class="business_card">
    <a href="/static/users_documents/9/business_card.pdf" target="_blank">
    <img src="/static/images/business_card.png" name="business_card" alt="business_card_image">
    </a>
   </td>

When user send post request, previously pdf file on server is deleted and new pdf is created. But, problem is that browser cache old version of file, and I must press every time CTRL+F5 to hard refresh cache and then I can see file from server, not from cache.

Do I need to use JavaScript to clear cache?
Also, my a tag reference to page like this:

https://192.168.2.244/static/users_documents/9/business_card.pdf

and html for that page is created by Firefox to display my pdf file.

Some additional info which may help is that I'm using Nginx server on Ubuntu 16.04.3.

Answer 1

You could also fix this by using the HTTP header Cache-Control on the server.

Using Cache-Control: no-cache, no-store, must-revalidate would tell the browser not to cache the URL and to always request a new file.

On the plus side, since it doesn't use JavaScript, this would also work on browsers with JavaScript disabled.

Source: Cache-Control on MDN

Answer 2

To expand on what @hindmost is saying in the comments, a browser will not use a cached version of the document if the URL has a query attached to it, with a number that is higher than a previously cached version of this file. Usually this will be done by adding ?v=2 or something like that to the url. Using Date.now() ensures this number is always higher than any previously cached version.

url + '?v=' + Date.now(); will result in a unique version number every time, and since time only counts forward, the number will always be larger than the previous version.