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 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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
再说下636单管机
2021/03/02 无线电
高亮度显示php源代码
2006/10/09 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Django添加sitemap的方法示例
2018/08/06 Python
Python 加密与解密小结
2018/12/06 Python
python 循环数据赋值实例
2019/12/02 Python
flask开启多线程的具体方法
2020/08/02 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
西部世纪.net笔试题面试题
2014/04/03 面试题
高校自主招生自荐信
2013/12/09 职场文书
工程班组长岗位职责
2013/12/30 职场文书
医院辞职信范文
2014/01/17 职场文书
需求分析说明书
2014/05/09 职场文书
迎新生欢迎词
2015/01/23 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
2016开学第一课心得体会
2016/01/23 职场文书