vue导出html、word原理
日期:2020-06-10
来源:程序思维浏览:1313次
今天给大家说说如何用vue导出html静态页面和word的原理。
由于导出word时,页面样式无法正常使用,因此整体页面采用table布局,仅在几个地方添加style样式,没有其余样式:
/**
* 当页面中有canvas时,我的做法是
* 在页面中预先放置一个src为空的img标签
* 点击导出时,将canvas转为base64,将之前设置的img标签的src修改为base64,同时置空canvas
* 需要注意的是,这种情况下,当结束导出操作时,由于页面中的canvas已经替换为图片,进行获取canvas标签操作时会报错
* 因此需要进行判断
* 当页面中存在canvas标签时,进行转换canvas操作
* 否则直接导出页面内容
*/
var cv = document.getElementsByTagName("canvas")[0]; //获取canvas
var resImg = document.getElementsByClassName("resImg")[0]; //获取包裹canvas的标签
var cimg = document.getElementsByClassName("cimg")[0];//获取空src的img标签
// 将canvas转为图片
var context = cv.getContext("2d");
var srcDataURL = cv.toDataURL("image/png");
cimg.setAttribute("src",srcDataURL);
resImg.innerHTML = "";
let tableConts =document.getElementsByClassName("tablepart")[0].innerHTML;// 获取要导出部分的内容
// 将内容补完为完整的html页面
let html_ = `
${tableConts}
`;
// 将html页面发送至后台进行处理
// 构造blob文件流
let html_ = new Blob([html_],{ "type" : "text/html;charset=utf-8" })
let formdata = new FormData();
formdata.append('file', html_, `sdf.html`);//sdf.html是设置文件名
this.$axios({
method: "post",
data: html_,
headers: {
// 后台要求设置为json,使用时依据后台情况决定
"Content-Type": "application/json"
},
responseType: "blob", //这里如果不设置,下载会打不开文件
url: "http://192.168.0.125:9006/adminQuestion/exportWord"
})
.then(res => {
//通过后台返回 的word文件流设置文件名并下载
var blob = new Blob([res.data], {
type:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8"
}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
console.log(blob);
var downloadElement = document.createElement("a");
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = "a.doc"; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
})
.catch(err => {
console.log(err);
});
其实转成word还是要需要和后端程序配合的,前端负责的工作是将html转成blob类型发送给后端,后端转成word格式,前端用blob类型进行下载。