html5 How to force a 'Download File prompt' ?

vmars316 · February 8, 2019

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 !

Ingolme · February 9, 2019

HTML 5 has the download attribute, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes

vmars316 · February 9, 2019

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

Ingolme · February 9, 2019

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.

vmars316 · February 9, 2019

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

vmars316 · February 9, 2019

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>

Ingolme · February 10, 2019

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.

vmars316 · February 11, 2019

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>

Sign In

html5 How to force a 'Download File prompt' ?

Recommended Posts

vmars316

Ingolme

vmars316

Ingolme

vmars316

vmars316

Ingolme

vmars316

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity