This code is a JavaScript/jQuery function. The main function is to click on the page after the page is loaded. <pre> element, its text content is downloaded locally in the specified file type.
The specific code analysis is as follows:
- First use
$(document).ready()method to ensure that the code is executed after the document is loaded. - Use
$()Function selector selects all<pre>element and use.click()Method to bind a click event handler to it. - When the user clicks
<pre>element, triggers the click event handler. - In the click event handler, first use
$(this).text()Get the currently clicked<pre>The text content of the element and assigned to the variablecontent。 - Then use
$(this).attr('data-filename')Get the currently clicked<pre>elementaldata-filenameattribute value and assign it to a variablefileName. This attribute is used to specify the name of the downloaded file. - The call is called
downloadFilefunction, pass incontent、text/plain和fileNameas parameters. downloadFileThe function is defined inside an outer function and accepts three parameters:content(Document Content),contentType(File type) andfileName(filename).- 在
downloadFileUse within a functionnew Blob()Create a Blob object whose content is:contentType:contentType。 - Create one
<a>Element; configure it.hrefAttribute:window.URL.createObjectURL(blob)This will generate a temporary URL for the Blob object. - set up
<a>elementaldownloadAttribute:fileNameThe name of the file to download. - 将
<a>Element style settings:display: none;Hide this element. - 将
<a>Add elements to the document<body>Element. - Call
.click()Method: Simulating user clicks<a>Element: enables file download. - After completing the file download, please use it.
document.body.removeChild(link)将<a>The element is removed from the document.
Overall, this code implements a simple file download functionality; simply click on the button on the page. <pre> When an element is encountered, its content will be automatically downloaded to the local device in the specified file format; the file name is determined by data-filename Attribute specification.
Code:
$(document).ready(function() {
$('pre').click(function() {
var content = $(this).text();
var fileName = $(this).attr('data-filename');
downloadFile(content, 'text/plain', fileName);
});
function downloadFile(content, contentType, fileName) {
var blob = new Blob([content], {type: contentType});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});Second version:
Double-click to determine whether to download the pop-up file; click 'Download' to proceed with the download!
$(document).ready(function() {
$('pre').dblclick(function() {
var content = $(this).text();
var fileName = $(this).attr('data-filename');
showDownloadConfirmation(content, 'text/plain', fileName);
});
function showDownloadConfirmation(content, contentType, fileName) {
if (confirm("是否下载该文件？")) {
downloadFile(content, contentType, fileName);
}
}
function downloadFile(content, contentType, fileName) {
var blob = new Blob([content], {type: contentType});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
