导出的页面组件如下：

模板div id=' resume id ' resume MML ref=' resume ' @ on-download=' download '/div/template 1，导出超文本标记语言

方法：

1)获取要导出的组件页面的钢性铸铁把它设置成射流研究…变量一文本并通过出口导出

2)获取要导出组件页面的超文本标记语言的数字正射影像图标签代码，通过这个$refs.resume.$el.innerHTML获取，也可以通过文件。getelementbyid('简历id ')获得

3)构造超文本标记语言页面，并使用createObjectURL构造一个文件流并下载，如下：

var a=文档。创建元素(' a ')；var url=窗口. URL.createObjectURL(新Blob([内容])，{键入：(选项。键入| |“文本/纯文本”)；charset='(选项。编码| | ' utf-8 ')})；a.href=urla。download=FIlename | |“file”；a .点击()；窗户网址。revokeObjectURl(网址)；具体代码如下：

从“axios”导入axios "从导入结果方法./resume-html从"文件编写器"导入作家；从" @/资产/风格/下载/简历。CSS。js "导入{ resumecss }.下载html(名称){让html=this。gethtml content()；let s=writer(`${name}的简历。html `，html，' utf-8 ')；console.log('s stream '，s)；}，gethtml content(){ const template=this .参考文献。简历。$ El。innerHTMl让html=`！DOCTYPE html html head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0' titleX-Find迅聘选才/title link rel='样式表href=' https://cdn。bootcss。com/iview/2。14 .0/样式/iview。CSS '/style $ { resume CSS }/style/head body div class=' resume _ preview _ page ' style=' margin 33600 auto；宽度：1200 px ' $ { template }/div/body/html `；返回html}导出的样式射流研究…文件：

导出const resumecss=`html，body { position: relative高度： 100%;}.page _ layout {位置：相对；高度： 100%;display: flex .layout _ content { flex-grow : 1；显示： flex flex-方向：柱；}}.2、导出单词

方法：

1)使用上面构造好的超文本标记语言文本，以文件流的形式发送到后台，后台通过转换得到单词流传给前端并下载

让url=`${this .$ URL }/上传文件/上传简历`；让html=这个。gethtml content()；//构造一滴文件流让html_=new Blob([html]，{ ' type ' : ' text/html；charset=utf-8' })让FormData=new FormData()；formdata.append('file '，html_，` SDF。html `)；//sdf.html是设置文件名axios({ method: 'post '，url: url，data:formdata，responseType:'blob '，//这里如果不设置，下载会打不开文件}) .然后(res={ console.log('download res '，RES)；//通过后台返回的单词文件流设置文件名并下载var blob=新Blob([res.data]，{ type : '应用程序/vnd。office文档。文字处理。文件；charset=utf-8 ' })；//应用程序/vnd。office文档。文字处理。文档这里表示文件类型var DownLoadElement=文档。create ElEMENT(' a ')；var href=window .网址。CreateObjectURl(blob)；//创建下载的链接downloadeelement . href=hrefdownloadeelement。下载=' s . doc//下载后文件名文件。尸体。appendchild(DownLoadElement)；下载电子邮件。单击()；//点击下载文件。尸体。移除子元素(DownLoadElement)；//下载完成移除元素窗户网址。revokeObjectURl(href)；//释放掉一滴对象})3、导出便携文档格式

方法：

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

//下面两个包裹要单独安装从" html2Canvas "导入html2canvas从" JsPDF "导入jspdf导出默认{ install (Vue，options){ Vue。原型。getPdF=函数(id，title){ html 2 canvas(文档。queryselector(`# $ { id } `)，{//all wtaint : true usecors 3360 true//看情况选用上面还是下面的， }).然后（函数(画布){ 0让contentWidth=canvas.width让contentHeight=canvas.height让页面高度=内容宽度/592.28 * 841.89让左高度=内容高度让位置=0让imgWidth=595.28/内容宽度*内容高度让页面数据=画布。todaytaul('图像/JPEG '，1.0)让PDF=新的JsPDF('，' pt '，' a4 ')if(left page height){ PdFPdf ' })} } } 2)main . js文件中添加如下代码：

从@/utils/htmlToPdf ' vue。使用(HTMltopdf)3)导入HTMltopdf然后就可以在要导出可移植文档格式文件的扩展名(可移植文档格式的缩写)文件组件里面添加如下代码即可导出

this.getPdf('resumeId '，名称)

总结：

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

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

引用：

1、https://stackoverflow。com/questions/43537121/如何在vue-js中获取超文本标记语言组件内容

2、文件写入器

3、nodejs(officegen) vue(axios)在客户端导出单词文档

4、Vue导出页面为便携文档格式格式

5、vue实现word，pdf文件的导出

以上所述是小编给大家介绍的某视频剪辑软件导出html、word和可移植文档格式文件的扩展名(可移植文档格式的缩写)的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！