This is the 10th day of my participation in Gwen Challenge

Hi, I’m Daotin, front end team leader. If you want to get more front end highlights, follow me and unlock new front end growth poses.

The following text:

How do we usually download resources on front-end projects? For example, a Word document, etc., here are 4 ways to summarize.

1. Download the URL of tag A

ExportUrl is a url for downloading, click on it to download the url directly in the current interface

<a :href="exportUrl" class="g-button simple">export</a> 
Copy the code

2. Pass the address into the browser address to trigger the download

window.open(exportUrl, '_self'); // This window opens to download, the address bar address will not change
window.open(exportUrl, '_blank'); // Open a new window to download
Copy the code

3. Submit and download the form

The submission of a form form is essentially an HTTP request.

The

element defines how to send data. All of its properties allow you to configure the request to be sent when the user clicks the submit button. The two most important properties are Action and Method.

The action attribute

This property defines where to send data. Its value must be a valid URL. If this property is not provided, the data will be sent to the URL of the page containing the form.

Method attribute

This property defines how data is sent. The HTTP protocol provides several ways to perform a request; HTML form data can be transferred through a number of different methods, the most common of which are GET and POST.

To submit data from a form, set action to the interface address, method to POST, and input data to the background in the form of name = key, value = value.

  • If there are multiple keys and values to be passed, set multiple inputs to store a single key and value.
  • If the requested interface does not need an argument, then input must have one, otherwise it will cause an interface error.
<form action="http://xxx.com" method="post">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi">
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom">
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

Copy the code

The form data sent is:

POST/HTTP/2.0 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 say=Hi&to=MomCopy the code

This is a jQuery plugin that uses a form to make an HTTP request:

$.download = function (url, params, method) {
        if (url && params) {
            var inputs = ' ', input, form = $('<form />').attr("action", url).attr("method", (method || "post"));
            $.each(params, function (k, v) {
                input = $("<input type='hidden' />");
                input.attr("name", k).attr("value", v);
                form.append(input);
            });
            form.appendTo('body').submit().remove(); }};Copy the code

Usage:

var url = "/app/lottery/awards/export", params = { FILETYPE: "excel07".FRMID: that.FRMID };
$.download(url, params, "post");
Copy the code

Reference link: developer.mozilla.org/zh-CN/docs/…

4, A tag download attribute

The download of the A tag is a new attribute of the HTML5 standard that instructs the browser to download the URL rather than navigate to it, thus prompting the user to save it as a local file.

Code examples:

<a href="http://ww2.sinaimg.cn/large/4b4d632fgw1f1hhza4495j20ku0rsjxs.jpg" download>download</a>
Copy the code

Note: This property only applies to same-origin urls, not cross-domain resources.

So how do you resolve cross-domain files?

Although the HTTP URL needs to be in the same source, blob: URL and data: URL can be used to make it easy for users to download content generated using JavaScript to solve cross-domain problems.

Cross-domain resource download:

// Download a text file
const downloadText = (text, filename = ' ') {
  const a = document.createElement('a')
  a.download = filename
  // The text is of type TXT
  const blob = new Blob([text], {type: 'text/plain'}) 
  // Text refers to the text or string content to be downloaded
  a.href = window.URL.createObjectURL(blob) 
  / / will generate a similar blob: http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf URL string
  document.body.appendChild(a)  
  a.click()
  a.remove()
}
Copy the code

Q&A

How do you download files on front-end projects? Feel free to talk to me in the comments section again!

(after)

Recent hot articles:

  • Waterfall flow, it’s so easy
  • Four common ajax cross-domain solutions (easy to understand)
  • Vue. Js Naming Style Guide (Easy to remember Version)

Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin