最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
class=“upload-demo”
action=“”
:http-request=“myUpload”
:show-file-list=“false”
>
上传附件
选择文件以后
![](https://img-blog.csdnimg.cn/img_convert/6b20bf8b41528d0eb2348e8a7db69232.png)
![](https://img-blog.csdnimg.cn/img_convert/7cc793e60e57a76c0e9fe3544bb17f06.png)
![](https://img-blog.csdnimg.cn/img_convert/210f4c725b5a6bac626da55ef740de32.png)
![](https://img-blog.csdnimg.cn/img_convert/ca55076cd3617dd4b2ec5c4be07056bd.png)
![](https://img-blog.csdnimg.cn/img_convert/8032f7c93d58d5d2c4065c91f428c48b.png)
myUpload(content){
console.log(content);
const downUrl = URL.createObjectURL(content.file)
const a = document.createElement(‘a’);
this.
r
e
f
s
.
s
e
l
e
c
t
F
i
l
e
N
a
m
e
B
o
x
.
i
n
n
e
r
H
T
M
L
=
"
"
;
t
h
i
s
.
refs.selectFileNameBox.innerHTML = ""; this.
refs.selectFileNameBox.innerHTML="";this.refs.selectFileNameBox.append(a);
a.innerHTML = content.file.name;
a.href = downUrl
a.download = content.file.name;
a.target = ‘_blank’;
const addTypeArray = content.file.name.split(“.”);
const addType = addTypeArray[addTypeArray.length - 1];
console.log(addType);
this.uploadFileName = content.file.name;
this.uploadFileObj = content.file;
if (addType === "pdf") {
const url = URL.createObjectURL(content.file);
console.log(url);
this.xzbjPreviewIframeSrc = url;
this.xzbjIframeIsShow = true;
this.xzbjDialogPreviewDiv = false;
this.xzbjPreviewImgUrl = "";
this.xzbjDocPreviewFlag = false;
this.previewBoxStyle = "height:400px;position: relative;overflow:hidden;"
}
else if(addType === "doc" || addType === "docx" || addType === "word"){
console.log("word文件预览")
this.xzbjPreviewImgUrl = "";
this.xzbjPreviewIframeSrc = "";
this.xzbjDialogPreviewDiv = false;
this.xzbjDocPreviewFlag = true;
this.xzbjIframeIsShow = false;
// 将file转为buffer
let fr = new FileReader();
fr.readAsArrayBuffer(content.file);
fr.addEventListener("loadend",(e) => {
console.log("loadend---->", e)
let buffer = e.target.result;
this.docxRender(buffer);
},false);
}
//".rar, .zip, .doc, .docx, .xls, .txt, .pdf, .jpg, .png, .jpeg,"
else if (["png", "jpg", "jpeg","bmp"].includes(addType)) {
this.xzbjPreviewIframeSrc = "";
this.xzbjIframeIsShow = false;
this.xzbjDocPreviewFlag = false;
this.imgPreview(content.file);
this.previewBoxStyle = "height:400px;position: relative;overflow:auto;"
} else if (addType === "rar" || addType === "zip" || addType === "7z") {
this.filePreviewInfo = "请下载附件进行查看"
this.xzbjPreviewImgUrl = "";
this.xzbjPreviewIframeSrc = "";
this.xzbjDocPreviewFlag = false;
this.xzbjDialogPreviewDiv = true;
this.$message({
message: "该文件类型暂不支持预览",
type: "warning",
});
return false;
}else{
this.filePreviewInfo = "该文件类型暂不支持预览"
this.xzbjPreviewIframeSrc = "";
this.xzbjIframeIsShow = false;
this.xzbjDialogPreviewDiv = true;
this.xzbjPreviewImgUrl = "";
this.xzbjDocPreviewFlag = false;
this.$message({
message: "请仅允许上传后缀为pdf、doc、docx、word、jpg、png、bmp、rar、zip、7z的附件",
type: "warning",
});
}
}
// 渲染docx
docxRender(buffer) {
let bodyContainer = document.getElementById(“demoDocContainer”);
renderAsync(
buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
bodyContainer, // HTMLElement 渲染文档内容的元素,
null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null,则将使用 bodyContainer。
this.docxOptions // 配置
).then(res => {
console.log(“res---->”, res)
})
},
下面是图片预览核心代码
imgPreview(file) {
// 看支持不支持FileReader
if (!file || !window.FileReader) return;
// console.log(/^image/.test(file.type), “—/^image/.test(file.type)”)
if (/^image/.test(file.type)) {
// 创建一个reader
let reader = new FileReader();
// 将图片将转成 base64 格式
reader.readAsDataURL(file);
// 读取成功后的回调
reader.onload = ({ target }) => {
this.xzbjDialogPreviewDiv = false;
this.xzbjPreviewImgUrl = target.result; //将img转化为二进制数据
// console.log(“target:”, target);
};
}
},
这样就实现了纯前端预览word功能
二、接下来实现 配合后端预览word
根据后端返回的流预览word
![](https://img-blog.csdnimg.cn/img_convert/dd9607276dc5f20ced5b40fbaa90ff9c.png)
request({
method: “get”,
url: “/notice/noticeFileView”,
responseType: ‘blob’,
params:{
id:row.id
},
headers: {
“Content-Type”: ‘application/json’
},
}).then(res=>{
console.log(res,“—文件预览”);
if(row.suffix.includes(“pdf”)){
this.previewPdfFn(res);
// let blob = new Blob([res],{
// type: ‘application/pdf’
// })
// let url = window.URL.createObjectURL(blob);
this.xqPreviewImgUrl = “”;
this.xqPreviewPdfUrl = this.previewPdfFn(res);
this.xqPdfPreviewFlag = true;
this.xqDocPreviewFlag = false;
this.xqPerviewStyle = “height:600px;position: relative;overflow:hidden”
}else if(row.suffix.includes(“docx”) || row.suffix.includes(“doc”)|| row.suffix.includes(“word”)){
console.log(“预览word”)
this.xqDocPreviewFlag = true;
let blob = new Blob([res],{
type: ‘application/pdf’
})
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …nsole.log(this.refs.xqDocContainer,"—this.
r
e
f
s
.
x
q
D
o
c
C
o
n
t
a
i
n
e
r
"
)
d
o
c
x
x
.
r
e
n
d
e
r
A
s
y
n
c
(
b
l
o
b
,
t
h
i
s
.
refs.xqDocContainer") docxx.renderAsync(blob, this.
refs.xqDocContainer") docxx.renderAsync(blob,this.refs.xqDocContainer)
})
} else if (row.suffix === “.rar” || row.suffix === “.zip” || row.suffix === “7z”) {
this.xqDocPreviewFlag = false;
this.xzbjPreviewImgUrl = “”;
this.xzbjPreviewIframeSrc = “”;
this.$message({
message: “该文件类型暂不支持预览”,
type: “warning”,
});
return false;
算法刷题
大厂面试还是很注重算法题的,尤其是字节跳动,算法是问的比较多的,关于算法,推荐《LeetCode》和《算法的乐趣》,这两本我也有电子版,字节跳动、阿里、美团等大厂面试题(含答案+解析)、学习笔记、Xmind思维导图均可以分享给大家学习。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
写在最后
最后,对所以做Java的朋友提几点建议,也是我的个人心得:
-
疯狂编程
-
学习效果可视化
-
写博客
-
阅读优秀代码
-
心态调整
解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
写在最后
最后,对所以做Java的朋友提几点建议,也是我的个人心得:
-
疯狂编程
-
学习效果可视化
-
写博客
-
阅读优秀代码
-
心态调整