各种文件的预览下载（docx，pdf，txt，图片）

一、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>

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/51825.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！