由于导出word时,页面样式无法正常使用,因此整体页面采用table布局,仅在几个地方添加style样式,没有其余样式
var cv = document.getElementsByTagName("canvas")[0];
var resImg = document.getElementsByClassName("resImg")[0];
var cimg = document.getElementsByClassName("cimg")[0];
var context = cv.getContext("2d");
var srcDataURL = cv.toDataURL("image/png");
cimg.setAttribute("src",srcDataURL);
resImg.innerHTML = "";
let tableConts =document.getElementsByClassName("tablepart")[0].innerHTML;
let html_ = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
<style>
</style>
</head>
<body>
<div class="resume_preview_page" style="margin:0 auto;width:1200px">
${tableConts}
</div>
</body>
</html>`;
this.$axios({
method: "post",
data: html_,
headers: {
"Content-Type": "application/json"
},
responseType: "blob",
url: "http://192.168.0.125:9006/adminQuestion/exportWord"
})
.then(res => {
var blob = new Blob([res.data], {
type:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8"
});
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);
})
.catch(err => {
console.log(err);
});
引用
vue导出html、word和pdf