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


Posted in Javascript onJuly 31, 2018

导出的页面组件如下:

<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);

具体代码如下:    

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 = `<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>X-Find迅聘选才</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
 <style>
 ${resumecss}
 </style>
 </head>
 <body>
 <div class="resume_preview_page" style="margin:0 auto;width:1200px">
 ${template}
 </div>
 </body>
 </html>`;
 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)

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

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

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

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

总结:

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的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS定时器实例详细分析
Oct 11 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 #Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 #Javascript
微信网页授权并获取用户信息的方法
Jul 30 #Javascript
axios简单实现小程序延时loading指示
Jul 30 #Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 #Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 #Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 #Javascript
You might like
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
python获取外网IP并发邮件的实现方法
2017/10/01 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
给排水工程师岗位职责
2013/11/21 职场文书
家长寄语大全
2014/04/02 职场文书
村级换届选举方案
2014/05/10 职场文书
城市创卫标语
2014/06/17 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
物理课外活动总结
2014/08/27 职场文书
2015年中秋节主持词
2015/07/30 职场文书
安全教育主题班会教案
2015/08/12 职场文书
初中生物教学随笔
2015/08/15 职场文书