feat: html格式转图片网页工具
parent
affd1ea9ee
commit
347f59895a
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<div class="container flex min-h-screen p-8">
|
||||
<div class="flex flex-col w-[40%] pr-8">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900">HTML 转图片工具</h1>
|
||||
<p class="mt-2 text-gray-600">将您的 HTML 代码转换为高质量图片</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<label class="text-sm font-medium text-gray-700">输入 HTML 代码</label>
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
text
|
||||
class="text-sm whitespace-nowrap !rounded-button"
|
||||
@click="importFile"
|
||||
>
|
||||
<el-icon class="mr-1"><Upload /></el-icon>导入文件
|
||||
</el-button> -->
|
||||
<el-button
|
||||
text
|
||||
class="text-sm text-gray-500 whitespace-nowrap !rounded-button"
|
||||
@click="clearContent"
|
||||
>
|
||||
<el-icon class="mr-1"><Delete /></el-icon>清空
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
v-model="htmlContent"
|
||||
type="textarea"
|
||||
:rows="10"
|
||||
class="flex-1"
|
||||
placeholder="在此处粘贴您的 HTML 代码..."
|
||||
resize="none"
|
||||
/>
|
||||
|
||||
<div class="mt-6 flex items-center justify-end">
|
||||
<!-- <div class="flex items-center space-x-4">
|
||||
<div class="flex items-center">
|
||||
<label class="text-sm text-gray-600 mr-2">宽度</label>
|
||||
<el-input-number
|
||||
v-model="width"
|
||||
:min="1"
|
||||
:max="3840"
|
||||
class="w-[100px]"
|
||||
controls-position="right"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label class="text-sm text-gray-600 mr-2">高度</label>
|
||||
<el-input-number
|
||||
v-model="height"
|
||||
:min="1"
|
||||
:max="2160"
|
||||
class="w-[100px]"
|
||||
controls-position="right"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
<el-button
|
||||
type="primary"
|
||||
class="whitespace-nowrap !rounded-button"
|
||||
@click="preview"
|
||||
>
|
||||
<el-icon class="mr-2"><View /></el-icon>预览效果
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-[60%] bg-gray-50 rounded-lg p-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-medium text-gray-900">预览效果</h2>
|
||||
<div class="flex items-center space-x-4">
|
||||
<el-button
|
||||
class="whitespace-nowrap !rounded-button"
|
||||
@click="toggleFullscreen"
|
||||
>
|
||||
<el-icon class="mr-1"><FullScreen /></el-icon>全屏预览
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
class="whitespace-nowrap !rounded-button"
|
||||
@click="exportImage"
|
||||
>
|
||||
<el-icon class="mr-2"><Download /></el-icon>导出图片
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 bg-white rounded-lg border border-gray-200 p-6">
|
||||
<div
|
||||
class="flex bg-white items-center justify-center h-full text-gray-400"
|
||||
ref="previewRef"
|
||||
>
|
||||
<div
|
||||
class="text-center"
|
||||
v-if="!previewContent"
|
||||
>
|
||||
<el-icon class="text-6xl mb-4"><Picture /></el-icon>
|
||||
<p>预览区域</p>
|
||||
<p class="text-sm mt-2">点击"预览效果"按钮查看渲染结果</p>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
v-html="previewContent"
|
||||
class="w-full h-full"
|
||||
ref="htmlContentRef"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<el-alert
|
||||
type="info"
|
||||
show-icon
|
||||
:closable="false"
|
||||
>
|
||||
<template #title>
|
||||
<span class="font-medium">使用提示</span>
|
||||
</template>
|
||||
<ul class="list-disc pl-5 space-y-1 mt-2">
|
||||
<li>支持完整的 HTML 代码转换</li>
|
||||
<li>可自定义输出图片尺寸</li>
|
||||
<li>支持导出 PNG、JPG 格式</li>
|
||||
<li>建议代码格式化后再进行转换</li>
|
||||
</ul>
|
||||
</el-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { Upload, Delete, View, FullScreen, Download, Picture } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import html2canvas from 'html2canvas';
|
||||
|
||||
const htmlContent = ref('');
|
||||
const htmlContentRef = ref(null);
|
||||
const width = ref(1920);
|
||||
const height = ref(1080);
|
||||
const previewContent = ref('');
|
||||
const previewRef = ref<HTMLElement | null>(null);
|
||||
|
||||
const importFile = () => {
|
||||
ElMessage.info('导入文件功能开发中...');
|
||||
};
|
||||
|
||||
const clearContent = () => {
|
||||
htmlContent.value = '';
|
||||
previewContent.value = '';
|
||||
};
|
||||
|
||||
const preview = () => {
|
||||
if (!htmlContent.value) {
|
||||
ElMessage.warning('请先输入 HTML 代码');
|
||||
return;
|
||||
}
|
||||
previewContent.value = htmlContent.value;
|
||||
};
|
||||
|
||||
const toggleFullscreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
previewRef.value?.requestFullscreen();
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
};
|
||||
|
||||
const exportImage = () => {
|
||||
if (!previewContent.value) {
|
||||
ElMessage.warning('请先预览效果');
|
||||
return;
|
||||
}
|
||||
html2canvas(previewRef.value).then((canvas) => {
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
const img = new Image();
|
||||
img.src = imgData;
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.download = 'preview.png';
|
||||
link.href = imgData;
|
||||
link.click();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-textarea__inner) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-input-number .el-input__inner) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1440px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue