html转word的原理,vue导出html、word原理

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类型进行下载。