一、word
1、word的预览可以用onlyoffice
2、word的预览下载
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div onclick="FilehandleClick()">word文件</div></body><script>function FilehandleClick(){window.location.href = "word文件线上链接地址"let downloadElement = document.createElement("a");let href = window.URL.createObjectURL(blob);downloadElement.href = href;downloadElement.download = name;document.body.appendChild(downloadElement);downloadElement.click();document.body.removeChild(downloadElement);window.URL.revokeObjectURL(href);}</script>
</html>二、pdf
1、pdf预览：跳转新页面预览
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div onclick="FilehandleClick()">pdf文件</div></body><script>//预览，新开一页async function FilehandleClick() {let url = 'pdf线上链接地址.pdf'const response = await fetch(url)// 使用 fetch 函数获取 url 对应资源的响应const blob = await response.blob()//使用 response.blob() 方法将响应转换为一个 Blob 对象const blobUrl = URL.createObjectURL(blob)//使用 URL.createObjectURL(blob) 方法创建一个指向 Blob 对象的URL window.open(blobUrl, '_blank')}</script>
</html>2、pdf下载：引入外部插件
-
引入插件
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>-
button
<button onclick="downloadPDF('pdf线上链接地址.pdf', '下载后的pdf名字.pdf')">下载PDF</button>- function
function downloadPDF(url, filename) {fetch(url).then(response => response.blob()).then(blob => {saveAs(blob, filename);}).catch(error => console.error('Error downloading PDF:', error));
}
-
全部代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>PDF Viewer</title><script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script></head><body><button onclick="downloadPDF('pdf线上链接地址.pdf', '下载文件名称.pdf')">下载PDF</button><script>function downloadPDF(url, filename) {fetch(url).then(response => response.blob()).then(blob => {saveAs(blob, filename);}).catch(error => console.error('Error downloading PDF:', error));}</script></body>
</html>3、pdf直接下载
注意：这个下载可能会出现文件损坏，无法打开的问题
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>PDF下载</title></head><body><buttononclick="downloadPDF('pdf线上链接地址.pdf', '下载文件名称.pdf')">下载PDF</button><script>function downloadPDF(val1, val2) {blob = new Blob([val1], {type: "application/pdf",});name = val2var downloadElement = document.createElement("a");var href = window.URL.createObjectURL(blob);downloadElement.href = href;downloadElement.download = name;document.body.appendChild(downloadElement);downloadElement.click();document.body.removeChild(downloadElement);window.URL.revokeObjectURL(href);}</script></body>
</html>三、txt
1、txt的预览：跳转新页面预览
注意：直接用a标签，可以跳转预览，但是会出现乱码的问题
<a href="线上链接地址.txt" target="_blank">txt文件地址</a>2、txt的下载
-
引入jquery
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>-
button
<button onclick="downloadTxt('线上链接.txt', '下载文件名称.txt')">下载txt</button>-
js
function downloadTxt(content, fileName) {$.ajax({url: content,success: function(data, status) {download(`${fileName}.txt`, data)},error: function(data, status) {// console.log('log err',arguments)}});
}function download(filename, text) {var pom = document.createElement("a");pom.setAttribute("href","data:text/plain;charset=utf-8," + encodeURIComponent(text));pom.setAttribute("download", filename);if (document.createEvent) {var event = document.createEvent("MouseEvents");event.initEvent("click", true, true);pom.dispatchEvent(event);} else {pom.click();}}
-
全部代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>txt下载</title><script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script></head><body><button onclick="downloadTxt('线上链接.txt', '下载文件名称.txt')">下载txt</button><script>function downloadTxt(content, fileName) {$.ajax({url: content,success: function(data, status) {download(`${fileName}.txt`, data)},error: function(data, status) {}});}function download(filename, text) {var pom = document.createElement("a");pom.setAttribute("href","data:text/plain;charset=utf-8," + encodeURIComponent(text));pom.setAttribute("download", filename);if (document.createEvent) {var event = document.createEvent("MouseEvents");event.initEvent("click", true, true);pom.dispatchEvent(event);} else {pom.click();}}</script></body>
</html>四、图片
1、图片的预览：直接跳转新页面预览
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>图片预览</title></head><body><img alt=""onclick="seePDF('线上图片链接.jpg')"src="线上图片链接.jpg"><script>/*** @param {Object} val2 文件的线上链接*/async function seePDF(val2) {const response = await fetch(val2)// 使用 fetch 函数获取 url 对应资源的响应const blob = await response.blob()//使用 response.blob() 方法将响应转换为一个 Blob 对象const blobUrl = URL.createObjectURL(blob)//使用 URL.createObjectURL(blob) 方法创建一个指向 Blob 对象的URL window.open(blobUrl, '_blank')}</script></body>
</html>2、图片的下载
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>图片下载</title></head><body><button onclick="FilehandleClick('线上图片链接.png'">下载图片</button><script>/*** @param {Object} val2 文件的线上链接*/function FilehandleClick(val2) {var imageUrl = val2; // 替换为你要下载的图片的URLvar fileName = "图片名称.jpg"; // 下载的文件名，根据需要自行设置var xhr = new XMLHttpRequest();xhr.open("GET", imageUrl, true);xhr.responseType = "blob";xhr.onload = function() {if (xhr.status === 200) {var blob = new Blob([xhr.response], {type: "image/jpg"}); // 根据实际图片类型进行设置var link = document.createElement("a");link.href = window.URL.createObjectURL(blob);link.download = fileName;link.click();}};xhr.send();var downloadElement = document.createElement("a");var href = window.URL.createObjectURL(blob);downloadElement.href = href;downloadElement.download = name;document.body.appendChild(downloadElement);downloadElement.click();document.body.removeChild(downloadElement);window.URL.revokeObjectURL(href);}</script></body>
</html>
