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