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>
相关推荐
Mintopia几秒前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽2 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥3 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob02346 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder12 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder12 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep19 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛25 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i33 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟38 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php