feat: Export conversation page to PDF #3941
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| <template> | ||
| <el-dialog | ||
| v-model="dialogVisible" | ||
| :title="$t('chat.preview')" | ||
| style="overflow: auto" | ||
| width="80%" | ||
| :before-close="close" | ||
| destroy-on-close | ||
| > | ||
| <div | ||
| v-loading="loading" | ||
| style="height: calc(70vh - 150px); overflow-y: auto; display: flex; justify-content: center" | ||
| > | ||
| <div ref="svgContainerRef"></div> | ||
| </div> | ||
| <template #footer> | ||
| <span class="dialog-footer"> | ||
| <el-button :loading="loading" @click="exportPDF">{{ $t('chat.exportPDF') }}</el-button> | ||
| <el-button | ||
| :loading="loading" | ||
| type="primary" | ||
| @click=" | ||
| () => { | ||
| loading = true | ||
| exportJepg() | ||
| } | ||
| " | ||
| > | ||
| {{ $t('chat.exportImg') }} | ||
| </el-button> | ||
| </span> | ||
| </template> | ||
| </el-dialog> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| import * as htmlToImage from 'html-to-image' | ||
| import { ref, nextTick } from 'vue' | ||
| import html2Canvas from 'html2canvas' | ||
| import { jsPDF } from 'jspdf' | ||
| const loading = ref<boolean>(false) | ||
| const svgContainerRef = ref() | ||
| const dialogVisible = ref<boolean>(false) | ||
| const open = (element: HTMLElement | null) => { | ||
| dialogVisible.value = true | ||
| loading.value = true | ||
| if (!element) { | ||
| return | ||
| } | ||
| setTimeout(() => { | ||
| nextTick(() => { | ||
| htmlToImage | ||
| .toSvg(element, { pixelRatio: 1, quality: 1 }) | ||
| .then((dataUrl) => { | ||
| return fetch(dataUrl) | ||
| .then((response) => { | ||
| return response.text() | ||
| }) | ||
| .then((text) => { | ||
| const parser = new DOMParser() | ||
| const svgDoc = parser.parseFromString(text, 'image/svg+xml') | ||
| const svgElement = svgDoc.documentElement | ||
| svgContainerRef.value.appendChild(svgElement) | ||
| svgContainerRef.value.style.height = svgElement.scrollHeight + 'px' | ||
| }) | ||
| }) | ||
| .finally(() => { | ||
| loading.value = false | ||
| }) | ||
| }) | ||
| }, 1) | ||
| } | ||
| const exportPDF = () => { | ||
| loading.value = true | ||
| setTimeout(() => { | ||
| nextTick(() => { | ||
| html2Canvas(svgContainerRef.value, { | ||
| logging: false, | ||
| }) | ||
| .then((canvas) => { | ||
| const doc = new jsPDF('p', 'mm', 'a4') | ||
| // 将canvas转换为图片 | ||
| const imgData = canvas.toDataURL(`image/jpeg`, 1) | ||
| // 获取PDF页面尺寸 | ||
| const pageWidth = doc.internal.pageSize.getWidth() | ||
| const pageHeight = doc.internal.pageSize.getHeight() | ||
| // 计算图像在PDF中的尺寸 | ||
| const imgWidth = pageWidth | ||
| const imgHeight = (canvas.height * imgWidth) / canvas.width | ||
| // 添加图像到PDF | ||
| doc.addImage(imgData, 'jpeg', 0, 0, imgWidth, imgHeight) | ||
| // 如果内容超过一页，自动添加新页面 | ||
| let heightLeft = imgHeight | ||
| let position = 0 | ||
| // 第一页已经添加 | ||
| heightLeft -= pageHeight | ||
| // 当内容超过一页时 | ||
| while (heightLeft >= 0) { | ||
| position = heightLeft - imgHeight | ||
| doc.addPage() | ||
| doc.addImage(imgData, 'jpeg', 0, position, imgWidth, imgHeight) | ||
| heightLeft -= pageHeight | ||
| } | ||
| // 保存PDF | ||
| doc.save('导出文档.pdf') | ||
| return 'ok' | ||
| }) | ||
| .finally(() => { | ||
| loading.value = false | ||
| }) | ||
| }) | ||
| }) | ||
| } | ||
| const exportJepg = () => { | ||
| loading.value = true | ||
| setTimeout(() => { | ||
| nextTick(() => { | ||
| html2Canvas(svgContainerRef.value, { | ||
| logging: false, | ||
| }) | ||
| .then((canvas) => { | ||
| // 将canvas转换为图片 | ||
| const imgData = canvas.toDataURL(`image/jpeg`, 1) | ||
| const link = document.createElement('a') | ||
| link.download = `webpage-screenshot.jpeg` | ||
| link.href = imgData | ||
| document.body.appendChild(link) | ||
| link.click() | ||
| return 'ok' | ||
| }) | ||
| .finally(() => { | ||
| loading.value = false | ||
| }) | ||
| }) | ||
| }, 1) | ||
| } | ||
| const close = () => { | ||
| dialogVisible.value = false | ||
| } | ||
| defineExpose({ open, close }) | ||
| </script> | ||
| <style lang="scss" scoped></style> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The provided Vue component appears to be designed to create a dialog with SVG content that allows users to export it as PDF or image. Here is a few points of consideration for optimization:
SVG Loading: The current approach involves converting an SVG string into an HTML element, which can lead to some overhead due to parsing and appending. Consider using a more direct method to handle inline SVG files directly.
Error Handling: Implement robust error handling in the
fetchoperations and other asynchronous calls to improve user experience. This includes providing meaningful messages when exports fail.Memory Management: Ensure that SVG elements are removed from memory after they are no longer needed to prevent excessive memory usage.
PDF Export Optimization:
jspdf-autotableto manage text wrapping and formatting automatically.Code Readability: Add comments and structure the code better to make it easier to understand at a glance.
Here's a revised version with these considerations:
Key Changes:
<img>tag within a hidden div (ref="content"), which simplifies rendering.convertBlobToDataUrlis created to asynchronously read the blob content as a data URL.