vue3 实现将html内容导出为图片、pdf和word

话不多说直接开始

本文使用到的开源插件库地址 wang1xiang

1.1 下载依赖

复制代码
npm install html2canvas jspdf html-docx-js-typescript file-saver --save

2.1 下载工具

javascript 复制代码
npm install html2image-pdf-word --save

3.1 页面使用

javascript 复制代码
<template>
    <div>
        <div @click="htmlToPdfFn(1)">导出为图片</div>
        <div @click="htmlToPdfFn(2)">导出为pdf</div>
        <div @click="htmlToPdfFn(3)">导出为Word</div>
        <div id="report" style="padding: 40px;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column label="Date" width="120">
                    <template #default="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column property="name" label="Name" width="120" />
                <el-table-column property="address" label="use show-overflow-tooltip" width="240"
                    show-overflow-tooltip />
                <el-table-column property="address" label="address" />
            </el-table>
            <div>
                测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
            </div>
            <div>
                测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
            </div>
            <div>
                测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字,测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { exportAsPdf, exportAsWord, exportAsImage } from 'html2image-pdf-word';
interface User {
    date: string
    name: string
    address: string
}
const tableData: User[] = [
    {
        date: '2016-05-04',
        name: 'Aleyna Kutzner',
        address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
    },
    {
        date: '2016-05-03',
        name: 'Helen Jacobi',
        address: '760 A Street, South Frankfield, Illinois',
    },
    {
        date: '2016-05-02',
        name: 'Brandon Deckert',
        address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
    },
    {
        date: '2016-05-01',
        name: 'Margie Smith',
        address: '23618 Windsor Drive, West Ricardoview, Idaho',
    },
]

let htmlToPdfFn = async (type: number) => {
    const dom: any = document.querySelector('#report');
    const filename = 'test';
    switch (type) {
        case 1:
            await exportAsImage(dom, filename, '水印,水印水印');
            break;
        case 2:
            await exportAsPdf(dom, filename);
            break;
        case 3:
            await exportAsWord(dom, filename);
            break;
    }
}
</script>
<style scoped lang="scss"></style>
相关推荐
LEAFF4 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man6 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬7 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C10 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
盏茶作酒2923 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_43 分钟前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐1 小时前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机1 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星1 小时前
vue实现微信聊天emoji表情
前端·javascript