Jump to content
vmars316

html5 How to force a 'Download File prompt' ?

Recommended Posts

Hello & Thanks ,

I would like an Html5 button to Trigger a 'Download File prompt '

for all browsers . 

Rather than clicking on for example [Browser Customize and Control ] ,

then clicking  [More tools]  [Save Page As] etc..

I searched, but nothing related came up .

How can this be accomplished ? 

Thanks for your help !

 

Share this post


Link to post
Share on other sites

Thanks,

I was hoping it would be this easy:

<!DOCTYPE html>
<html>
<body>

<p>just a paragraph <p>

<a href="" download=""> Save This Page As </a>

</body>
</html>

It is, if I'm talking with the server , which I don't want to do .

I want to do it locally .

Will I need to supply the name of "This Page" ?

Or is there an abbreviated version ? 

Thanks

 

Share this post


Link to post
Share on other sites

The href attribute should point to a file. You don't need the ="" after "download" unless you want to save the file with a different name than its real name.

This might not work on the computer's local filesystem due to security restrictions in some browsers because of the same-origin policy which usually excludes the local filesystem.

Share this post


Link to post
Share on other sites

Thanks,

I was hoping to just force the saveas dialog .

So that the user could chose to change the filename .

I suppose that I could Prompt the user

1st with  the name (document.URL;)

and give them the option to change it or not. 

Then download the page .

Think I'll give that a shot.

Thanks

Share this post


Link to post
Share on other sites

Well I'm almost there , not getting any 'console errors',

but   setAttribute are not working :

          address_id.setAttribute("href", useThisURL);
          address_id.setAttribute("download", useThisURL);

I think these are the problem areas with the complete code below these:

                    <br><a id="address_id" >Save Page As: </a>

and:

    <script>
      function savePageAs() {
      var  showMe = "nuttin happened?";
      var useThisURL  = prompt("If FileName is ok, Click OK , Else Change it:", document_URL)
      if (useThisURL != null) {  
alert("useThisURL= " + useThisURL);
          document.getElementById("address_id").innerHTML =
          "File Saved As:  " ;
          showMe = document.getElementById("address_id").innerHTML ;
alert("innerHTML= " + showMe);
          address_id.setAttribute("href", useThisURL);
          address_id.setAttribute("download", useThisURL);
alert("address_id= " + address_id);
          address_id.click();
      }  
      }
    </script> 

Thanks

Full code below:

<!DOCTYPE  html>  
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>3-Rows-3-Cols.html</title>
      <!--   
         file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/3-Rows-3-Cols.html
         https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
         https://www.freeformatter.com/html-validator.html 
         <a href="https://developer.mozilla.org/en-US/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
</a>
         -->  
      <style type="text/css">
         body {
         font-family:Sans-serif;
         margin: 0 auto;
         padding:0;
         border: 0;
         height: 100%;
         }
         html {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         border: 0;
         }
         #wholePageWrapper {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         }
         .Table
         {
         text-align: center;    
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #mainHeading
         {
         text-align: center;
         width: 100%;
         background: #BCCE98;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #container {
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         overflow: hidden;
         margin: 0 auto;
         padding:0;
         }
         #Row1
         {
         display: block;
         width: 100%;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #Row2
         {
         display: block;    
         width: 100%;
         margin: 0 auto;
         padding:0;
         }
         #Row3
         {
         width: 100%;    
         margin: 0 auto;
         padding:0;
         vertical-align: top;  
         display: inline;   
         }
         #Row1Cell1
         {
         color: #4C4C4C; 
         display: inline-block;   
         text-align: center;
         width: 100%;
         font-size: 18px
         }
         #Row2Cell1
         {
         display: inline-block;   
         background-color: #DAE9BC;
         width: 20%;
         margin: 0 auto;        
         float: left;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell2
         {
         display: inline-block;   
         text-align: center;
         width: 60%;
         background-color:#F8F8FF;
         margin: 0 auto;         
         float:left; 
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell3
         {
         display: inline-block;   
         width: 20%;
         background: #e9f2d7; 
         margin: 0 auto;         
         float: right;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row3Cell1
         {
         display: inline-block;   
         width: 100%;
         background: #BCCE98;
         margin: 0 auto;    
         overflow: auto;      
         text-align: center;         
         }
      #p_bn {
      text-align: left;
      }
      #p_ah {
      color: #4C4C4C; /* color: #555555;  */
      text-align: left;
      font-size: 16px
      }
      #p_tgh {
/*      color: #999999;  */
      color: #4C4C4C; 
      text-align: left;
      font-size: 14px
      }
      #CurrentPageAddress {
      color: #BCCE98;
      }
      #SavePageAs_id {
      color: #BCCE98;
      }
      #address_id {
/*      color: #BCCE98;  */
      color: #000000;
      }
      </style>
   </head>
  <body onload="documentURL()"><!-- Run me 1st -->
      <div class="Table">
         <!-- ============NewRow============== -->
         <div id="Row1">
            <div id="Row1Cell1">
               <p contenteditable="true"; id="mainHeading"> myMainHeading</p>
            </div>  <!-- <div class="Cell"  -->
         </div>  <!-- <div class="Row"  -->
         <!-- ============NewRow============== -->
           <div id="container"> 
            <div id="Row2">
               <div id="Row2Cell1">
                 <p contenteditable="" style="color:#5886BC;">notes</p>
               </div>  <!-- <div class="Cell"  -->
               
               <div id="Row2Cell2">
                <p contenteditable="" id="p_ah">Article Heading</p>
                <p contenteditable="" id="p_tgh">Text Area</p>
               </div>
               <!-- <div class="Cell"  -->
               
               <div id="Row2Cell3">
                  <p contenteditable="true";  style="color:#576C15">notes</p>
               </div> <!-- <div class="Cell"  -->
            </div> <!-- <div class="Row"  -->
         </div>  <!--  id="container"  -->
         <!-- ============NewRow============== -->
         <div id="Row3">
            <div id="Row3Cell1">
              <button onclick="createArticleHeading()">Add Article Heading</button>
              <button onclick="createTextArea()">Add Text Area</button>
              <form action="http://google.com" target="_blank" style="display: inline;">
                 <input type="submit" value="Search Google" />
              </form>
              <button onclick="savePageAs()">Save This Page As</button>
<!--                    <a id="href_id" href="" download=""> Save This Page As </a>  -->
                    <br><a id="address_id" >Save Page As: </a>
            </div>  <!-- <div class="Cell"  -->
<!--               <p id="CurrentPageAddress" align="center">_</p>  -->
         </div>  <!-- <div class="Row"  -->
      </div>  <!--  <div class="Table">  -->
      <script>
      var  ArticleHeading = "Article Heading";
      var  TextParagraph = "Text Area";
      var  ButtonParagraph = "New Link";
      var  document_URL;
      function documentURL() {
      document_URL = document.URL;
/*      document.getElementById("CurrentPageAddress").innerHTML = document_URL; */
      }
    </script>
    <script contenteditable="">
      function createTextArea() {
                var p_tgh = document.createElement("p");
                p_tgh.innerHTML = TextParagraph;
                p_tgh.setAttribute("contenteditable", "true");
                p_tgh.setAttribute("id","p_tgh");
                var content = document.getElementById("Row2Cell2");
                content.appendChild(p_tgh);
              }	
    </script>	
    <script contenteditable="">
      function createArticleHeading() {
        var p_ah = document.createElement('p');
        p_ah.innerHTML = ArticleHeading;
        p_ah.setAttribute('contenteditable', 'true');
        p_ah.setAttribute("id","p_ah");
        var content = document.getElementById('Row2Cell2');
        content.appendChild(p_ah);
      }
    </script> 
    <script>
      function savePageAs() {
      var  showMe = "nuttin happened?";
      var useThisURL  = prompt("If FileName is ok, Click OK , Else Change it:", document_URL)
      if (useThisURL != null) {  
alert("useThisURL= " + useThisURL);
          document.getElementById("address_id").innerHTML =
          "File Saved As:  " ;
          showMe = document.getElementById("address_id").innerHTML ;
alert("innerHTML= " + showMe);
          address_id.setAttribute("href", useThisURL);
          address_id.setAttribute("download", useThisURL);
alert("address_id= " + address_id);
          address_id.click();
      }  
      }
    </script> 
    <script contenteditable=""> 
      function createNewButton() {
      alert("function createNewButton()");
        var p_bn = document.createElement("li");
        p_bn.innerHTML = ButtonParagraph;
        p_bn.setAttribute('contenteditable', 'true');
        p_bn.setAttribute("id","li-Default");
//        var content = document.getElementById("ul");
        var content = document.getElementById("nav-01");
        content.appendChild(p_bn);
      }
    </script> 

   </body>
</html>

 

Share this post


Link to post
Share on other sites

I see what you're trying to do and it is not going to work. You cannot save the content of the edited page, all you can do is save the original source code of the page you wrote.

If you want to save the edited page, you will have to get Javascript to get the page's innerHTML and download it as a file, you can follow the approach given here: https://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server

You cannot decide where the file will be downloaded to, so remove all of those prompt() dialogs, the user will decide where the file goes.

 

Share this post


Link to post
Share on other sites

Thanks , 

That 'SavePageAs'  is working fine now .

If I hit the enter-key all looks well until I save the page .

The 'saved page'  shows that for each time the I hit the enter-key ,

a '<div>plus text</div> 'is created .  See below: 

               </div>
               <!-- <div class="Cell"  -->
               <div id="Row2Cell2">
                  <p contenteditable="" id="p_ah">Article Heading</p>
                  <p contenteditable="" id="p_tgh">Text Paragraph</p>
               <p contenteditable="true" id="p_tgh">Text Areadfghhjdfjj<div>sfhh</div><div>jbnn</div></p><p contenteditable="true" id="p_tgh">Text Area<div>adghh</div><div>adggg</div><div><br></div><div>asfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></p></div>

I think I can intercept  and  cancel the enter-key press .

So that instead of creating a new <div> I would like to 'insert' a few spaces .

So I will be working on that . 

I 'm also having a problem with getting 

         body {
         font-family:Sans-serif;
         margin: 0 auto;
         padding:0;
         border: 0;
         height: 100%;
         }
         html {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         border: 0;
         }

'height: 100%;' to work .

I want to fill up the whole page .

Is there a quick fix for that 

or should I open up a new Post ?

Thanks

Here is the working code (for Chrome) for ''Save This Page' :

<!DOCTYPE  html>  
<html>
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>3-Rows-3-Cols.html</title>
      <!--   
         file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/3-Rows-3-Cols-SaveAs.html
         https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
         https://www.freeformatter.com/html-validator.html 
         <a href="https://developer.mozilla.org/en-US/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
</a>
         -->  
      <style type="text/css">
         body {
         font-family:Sans-serif;
         margin: 0 auto;
         padding:0;
         border: 0;
         height: 100%;
         }
         html {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         border: 0;
         }
         #wholePageWrapper {
         height: 100%; 
         margin: 0 auto;
         padding:0;
         }
         .Table
         {
         height: 100%; 
         text-align: center;    
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #mainHeading
         {
         text-align: center;
         width: 100%;
         background: #BCCE98;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #container {
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         overflow: hidden;
         margin: 0 auto;
         padding:0;
         }
         #Row1
         {
         display: block;
         width: 100%;
         vertical-align: top;
         margin: 0 auto;
         padding:0;
         }
         #Row2
         {
         display: block;    
         width: 100%;
         margin: 0 auto;
         padding:0;
         }
         #Row3
         {
         width: 100%;    
         margin: 0 auto;
         padding:0;
         vertical-align: top;  
         display: inline;   
         }
         #Row1Cell1
         {
         color: #4C4C4C; 
         display: inline-block;   
         text-align: center;
         width: 100%;
         font-size: 18px
         }
         #Row2Cell1
         {
         display: inline-block;   
         background-color: #DAE9BC;
         width: 20%;
         margin: 0 auto;        
         float: left;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell2
         {
         display: inline-block;   
         text-align: center;
         width: 60%;
         background-color:#F8F8FF;
         margin: 0 auto;         
         float:left; 
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row2Cell3
         {
         display: inline-block;   
         width: 20%;
         background: #e9f2d7; 
         margin: 0 auto;         
         float: right;
         padding-bottom: 1001em;
         margin-bottom: -1000em;
         }
         #Row3Cell1
         {
         display: inline-block;   
         width: 100%;
         background: #BCCE98;
         margin: 0 auto;    
         overflow: auto;      
         text-align: center;         
         }
       div{ 
       text-align: left;
       font-size: 14px
       }
      #p_bn {
      text-align: left;
      }
      #p_ah {
      color: #4C4C4C; /* color: #555555;  */
      text-align: left;
      font-size: 16px
      }
      #p_tgh {
/*      color: #999999;  */
      color: #4C4C4C; 
      text-align: left;
      font-size: 14px
      }
      #currentPage_Address {
      color:#e9f2d7;
      }
      </style>
   </head>
  <body onload="documentURL()"><!-- Run me 1st -->
      <div class="Table">
         <!-- ============NewRow============== -->
         <div id="Row1">
            <div id="Row1Cell1">
              <p contenteditable="true"; id="mainHeading"> myMainHeading</p>
            </div>  <!-- <div class="Cell"  -->
         </div>  <!-- <div class="Row"  -->
         <!-- ============NewRow============== -->
           <div id="container"> 
            <div id="Row2">
               <div id="Row2Cell1">
                 <p contenteditable="" style="color:#5886BC;">notes</p>
               </div>  <!-- <div class="Cell"  -->
               
               <div id="Row2Cell2">
                <p contenteditable="" id="p_ah">Article Heading</p>
                <p contenteditable="" id="p_tgh">Text Area</p>
               </div>
               <!-- <div class="Cell"  -->
               
               <div id="Row2Cell3">
                  <p contenteditable="true";  style="color:#576C15">notes</p>
               </div> <!-- <div class="Cell"  -->
            </div> <!-- <div class="Row"  -->
         </div>  <!--  id="container"  -->
         <!-- ============NewRow============== -->
         <div id="Row3">
            <div id="Row3Cell1">
              <button onclick="createArticleHeading()">Add Article Heading</button>
              <button onclick="createTextArea()">Add Text Area</button>
              <form action="http://google.com" target="_blank" style="display: inline;">
                 <input type="submit" value="Search Google" />
              </form>
  <button onclick="saveAs(filename, allHtml)">Save This Page</button>
                    <p id="currentPage_Address" > </p>
            </div>  <!-- id="Row3Cell1"  -->
         </div>  <!-- <div class="Row"  -->
      </div>  <!--  <div class="Table">  -->
      <script>
      var  ArticleHeading = "Article Heading";
      var  TextParagraph = "Text Area";
      var  ButtonParagraph = "New Link";
      var  document_URL;
      const  filename = "MyStory.html";
      var allHtml =  document.documentElement.outerHTML; 
      var  document_URL;
      function documentURL() {
      document_URL = document.URL;
      document.getElementById("currentPage_Address").innerHTML = document_URL;  
      }
    </script>
    <script contenteditable="">
      function createTextArea() {
                var p_tgh = document.createElement("p");
                p_tgh.innerHTML = TextParagraph;
                p_tgh.setAttribute("contenteditable", "true");
                p_tgh.setAttribute("id","p_tgh");
                var content = document.getElementById("Row2Cell2");
                content.appendChild(p_tgh);
              }	
    </script>	
    <script contenteditable="">
      function createArticleHeading() {
        var p_ah = document.createElement('p');
        p_ah.innerHTML = ArticleHeading;
        p_ah.setAttribute('contenteditable', 'true');
        p_ah.setAttribute("id","p_ah");
        var content = document.getElementById('Row2Cell2');
        content.appendChild(p_ah);
      }
    </script> 
    <script>
   function saveAs(filename, allHtml) {
     allHtml =  document.documentElement.outerHTML; 
    var blob = new Blob([allHtml], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}    
    </script> 
    <script contenteditable=""> 
      function createNewButton() {
        var p_bn = document.createElement("li");
        p_bn.innerHTML = ButtonParagraph;
        p_bn.setAttribute('contenteditable', 'true');
        p_bn.setAttribute("id","li-Default");
        var content = document.getElementById("nav-01");
        content.appendChild(p_bn);
      }
    </script> 

   </body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×