js导出变量 vue_vue导出html、word和pdf的实现代码

导出的页面组件如下：

1、导出html

方法：

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

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

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

var a = document.createelement('a');

var url = window.url.createobjecturl(new blob([content],

{ type: (option.type || "text/plain") + ";charset=" + (option.encoding || 'utf-8') }));

a.href = url;

a.download = filename || 'file';

a.click();

window.url.revokeobjecturl(url);

具体代码如下：

import axios from 'axios'

import resumehtml from './resume-html'

import writer from 'file-writer';

import {resumecss} from '@/assets/style/download/resume.css.js'

...

downloadhtml(name){

let html = this.gethtmlcontent();

let s = writer(`${name}的简历.html`, html, 'utf-8');

console.log('s stream',s);

},

gethtmlcontent(){

const template = this.$refs.resume.$el.innerhtml;

let html = `

x-find迅聘选才

${resumecss}

${template}

`;

return html;

}

导出的样式js文件：

export const resumecss =`

html,

body {

position: relative;

height: 100%;

}

.page_layout {

position: relative;

height: 100%;

display: flex;

& .layout_content {

flex-grow: 1;

display: flex;

flex-direction: column;

}

}

...

2、导出word

方法：

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

let url = `${this.$url}/uploadfile/uploadresume`;

let html = this.gethtmlcontent();

// 构造blob文件流

let html_ = new blob([html],{ "type" : "text/html;charset=utf-8" })

let formdata = new formdata();

formdata.append('file', html_, `sdf.html`);//sdf.html是设置文件名

axios({

method: 'post',

url: url,

data:formdata,

responsetype:'blob',//这里如果不设置，下载会打不开文件

})

.then(res=>{

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文件，如下代码

// 下面两个package要单独安装

import html2canvas from 'html2canvas'

import jspdf from 'jspdf'

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', 0, 0, imgwidth, imgheight)

} else {

while (leftheight > 0) {

pdf.addimage(pagedata, 'jpeg', 0, position, imgwidth, imgheight)

leftheight -= pageheight

position -= 841.89

if (leftheight > 0) {

pdf.addpage()

}

}

}

pdf.save(title + '.pdf')

}

)

}

}

}

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

import htmltopdf from '@/utils/htmltopdf'

vue.use(htmltopdf)

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

this.getpdf('resumeid',name)

总结：

1、虽然完成了三种文件的导出但是我对word和html导出还是不满意，不是最佳解决方法，如果 有人有更好的方法，欢迎留言

2、导出的word没有了样式，所以这块还是有问题

引用 ：

1、

2、

3、

5、

以上所述是小编给大家介绍的vue导出html、word和pdf的实现代码，希望对大家有所帮助

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！