核心产品
帮助中心
时间：2021-05-26
导出的页面组件如下：
<template> <div id="resumeId"> <resumeHtml ref="resume" @on-download="download"/> </div></template>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);具体代码如下：
导出的样式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、https://stackoverflow.com/questions/43537121/how-to-get-html-content-of-component-in-vue-js
2、file-writer
3、nodejs(officegen)+vue(axios)在客户端导出word文档
4、Vue导出页面为PDF格式
5、vue实现word，pdf文件的导出
以上所述是小编给大家介绍的vue导出html、word和pdf的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
vue实现word或pdf文档导出的功能，我的项目是：后端返回一个文档流(下图)，然后前端对文档流做处理进行下载，代码如下：importaxiosfrom'ax
本文实例讲述了C#实现HTML转WORD及WORD转PDF的方法。分享给大家供大家参考。具体如下：功能：实现HTML转WORD，WORD转PDF具体代码如下：u
mPDF是一个很强大的PDF生成库，能基本兼容HTML标签和CSS3样式，这篇文章通过实例代码给大家介绍PHP中使用mpdf导出PDF文件的实现方法。具体代码如
本文实例为大家分享了Vue导出页面为PDF格式的具体代码，供大家参考，具体内容如下导出为图片1.将页面html转换成图片npminstallhtml2canva
2个简单的代码，帮你实现word的导出和word的读取功能一：导出word，word中的内容为代码：fromdocximportDocumentfromdocx
