vue导出html、word和pdf

本文介绍了在Vue应用中如何实现导出HTML、Word和PDF的功能。首先,通过获取组件的CSS和HTML内容来构造HTML并下载。接着,将HTML发送到后端转换为Word文件。最后,利用htmlToPdf.js和axios创建PDF文件。虽然实现了导出,但作者对Word和HTML的导出方式并不满意,尤其是Word导出时丢失了样式。
摘要由CSDN通过智能技术生成

导出的页面组件如下:

<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(){
            //获取html另外一种方式:this.$el.outerHTML
            const template = this.$refs.resume.$el.innerHTML;        
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值