vue导出html、word和pdf的实现代码

导出的页面组件如下：

1、导出html

方法：

1）获取要导出的组件页面的css把它设置成js变量一文本并通过export导出

2）获取要导出组件页面的html的dom标签代码，通过this.$refs.resume.$el.innerHTML获取，也可以通过document.getElementById('resumeId')获得

3）构造html页面，并使用createObjectURL构造一个文件流并下载，如下：

代码如下：

<Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> X-Find迅聘选才

`; return html; }

导出的样式js文件：

.page_layout {
position: relative;
height: 100%;
display: flex;
& .layout_content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
}
...

2、导出Word

方法：

1）使用上面构造好的html文本，以文件流的形式发送到后台，后台通过转换得到word流传给前端并下载

{ console.log('download res',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类型 var downloadElement = document.createElement('a'); var href = window.URL.createObjectURL(blob); //创建下载的链接 downloadElement.href = href; downloadElement.download ='s.doc'; //下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); //点击下载 document.body.removeChild(downloadElement); //下载完成移除元素 window.URL.revokeObjectURL(href); //释放掉blob对象 })

3、导出PDF

方法：

1）创建一个htmlToPdf.js文件，如下代码

export default{
install (Vue,options) {
Vue.prototype.getPdf = function (id,title) {
html2Canvas(document.querySelector(#${id}),{
// allowTaint: true
useCORS:true//看情况选用上面还是下面的，
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth contentHeight
let pageData = canvas.toDataURL('image/jpeg',1.0)
let PDF = new JsPDF('','pt','a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData,'JPEG',imgWidth,imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData,position,imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
}
)
}
}
}

2）main.js文件中添加如下代码：

3）然后就可以在要导出pdf文件组件里面添加如下代码即可导出