一、word
1、word的预览可以用onlyoffice
2、word的预览下载
javascript
<!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预览：跳转新页面预览
javascript
<!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下载：引入外部插件
引入插件
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>button
html
<button onclick="downloadPDF('pdf线上链接地址.pdf', '下载后的pdf名字.pdf')">下载PDF</button>- function
javascript
function downloadPDF(url, filename) {
fetch(url)
.then(response => response.blob())
.then(blob => {
saveAs(blob, filename);
})
.catch(error => console.error('Error downloading PDF:', error));
}全部代码
html
<!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直接下载
注意：这个下载可能会出现文件损坏，无法打开的问题
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PDF下载</title>
</head>
<body>
<button
onclick="downloadPDF('pdf线上链接地址.pdf', '下载文件名称.pdf')">下载PDF</button>
<script>
function downloadPDF(val1, val2) {
blob = new Blob([val1], {
type: "application/pdf",
});
name = val2
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>三、txt
1、txt的预览：跳转新页面预览
注意：直接用a标签，可以跳转预览，但是会出现乱码的问题
html
<a href="线上链接地址.txt" target="_blank">txt文件地址</a>2、txt的下载
引入jquery
html
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>button
html
<button onclick="downloadTxt('线上链接.txt', '下载文件名称.txt')">下载txt</button>js
javascript
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();
}
}全部代码
javascript
<!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、图片的预览：直接跳转新页面预览
html
<!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、图片的下载
html
<!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; // 替换为你要下载的图片的URL
var 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>