11<script setup lang="ts">
2+ import { useI18n } from ' vue-i18n' ;
23import { useITStorage } from ' @/composable/queryParams' ;
34import { Base64 } from ' js-base64' ;
45
6+ const { t } = useI18n ();
7+
58const url = ref (' ' );
69const html = ref (' ' );
710const error = ref (' ' );
@@ -26,12 +29,12 @@ const options = useITStorage('html-to-pdf:opts', {
2629});
2730
2831const pdfFormats = [
29- { label: ' A2 ' , value: ' A2' },
30- { label: ' A3 ' , value: ' A3' },
31- { label: ' A4 ' , value: ' A4' },
32- { label: ' A5 ' , value: ' A5' },
33- { label: ' Letter ' , value: ' Letter' },
34- { label: ' Legal ' , value: ' Legal' },
32+ { label: t ( ' tools.html-to-pdf.texts.label-a2 ' ) , value: ' A2' },
33+ { label: t ( ' tools.html-to-pdf.texts.label-a3 ' ) , value: ' A3' },
34+ { label: t ( ' tools.html-to-pdf.texts.label-a4 ' ) , value: ' A4' },
35+ { label: t ( ' tools.html-to-pdf.texts.label-a5 ' ) , value: ' A5' },
36+ { label: t ( ' tools.html-to-pdf.texts.label-letter ' ) , value: ' Letter' },
37+ { label: t ( ' tools.html-to-pdf.texts.label-legal ' ) , value: ' Legal' },
3538];
3639
3740function downloadURL(data : string , fileName : string ) {
@@ -186,28 +189,27 @@ async function generateBatch() {
186189<template >
187190 <div >
188191 <details mb-2 >
189- <summary >HTML to PDF Service Configuration ( self hosted) </summary >
192+ <summary >{{ t('tools.html-to-pdf.texts.tag-html-to-pdf-service-configuration- self- hosted') }} </summary >
190193 <n-card >
191- <NFormItem label="HTML to PDF Service Url: " label-placement="top">
192- <NInput v-model :value =" serverHost " placeholder="http:// localhost: 3000 " />
194+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-html-to-pdf-service-url ' ) " label-placement="top">
195+ <NInput v-model :value =" serverHost " : placeholder =" t ( ' tools.html-to-pdf.texts.placeholder- http- localhost- 3000' ) " />
193196 </NFormItem >
194- <NFormItem label="Basic Authentication: " label-placement="left" label-width="auto">
195- <NInput v-model :value =" serverAuth " placeholder="username: password " />
197+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-basic-authentication ' ) " label-placement="left" label-width="auto">
198+ <NInput v-model :value =" serverAuth " : placeholder =" t ( ' tools.html-to-pdf.texts.placeholder- username- password' ) " />
196199 </NFormItem >
197200 <n-p >
198- You must self host HTML to PDF Service. See:
199- <c-link href =" https://github.com/sharevb/puppeteer-htmltopdf?tab=readme-ov-file#running-in-docker" target =" _blank" >
200- HTML to PDF Service install
201+ {{ t('tools.html-to-pdf.texts.tag-you-must-self-host-html-to-pdf-service-see') }}<c-link href =" https://github.com/sharevb/puppeteer-htmltopdf?tab=readme-ov-file#running-in-docker" target =" _blank" >
202+ {{ t('tools.html-to-pdf.texts.tag-html-to-pdf-service-install') }}
201203 </c-link >
202204 </n-p >
203205 </n-card >
204206 </details >
205207
206208 <NTabs type="line">
207- <NTabPane name="url" tab="URL → PDF ">
209+ <NTabPane name="url" : tab =" t ( ' tools.html-to-pdf.texts.tab-url-pdf ' ) " >
208210 <NForm label-placement="left">
209- <NFormItem label="URL: ">
210- <NInput v-model :value =" url " placeholder="https:// example. com " />
211+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-url ' ) " >
212+ <NInput v-model :value =" url " : placeholder =" t ( ' tools.html-to-pdf.texts.placeholder- https- example- com' ) " />
211213 </NFormItem >
212214
213215 <n-space mb-2 justify =" center" >
@@ -217,7 +219,7 @@ async function generateBatch() {
217219 :disabled =" isRunning "
218220 @click =" generateFromUrl "
219221 >
220- Generate PDF
222+ {{ t('tools.html-to-pdf.texts.tag-generate-pdf') }}
221223 </NButton >
222224 </n-space >
223225
@@ -227,9 +229,9 @@ async function generateBatch() {
227229 </NForm >
228230 </NTabPane >
229231
230- <NTabPane name="html" tab="HTML → PDF ">
232+ <NTabPane name="html" : tab =" t ( ' tools.html-to-pdf.texts.tab-html-pdf ' ) " >
231233 <NForm label-placement="top">
232- <NFormItem label="HTML Content: ">
234+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-html-content ' ) " >
233235 <NInput
234236 v-model :value =" html "
235237 type="textarea"
@@ -244,7 +246,7 @@ async function generateBatch() {
244246 :disabled =" isRunning "
245247 @click =" generateFromHtml "
246248 >
247- Generate PDF
249+ {{ t('tools.html-to-pdf.texts.tag-generate-pdf') }}
248250 </NButton >
249251 </n-space >
250252
@@ -254,9 +256,9 @@ async function generateBatch() {
254256 </NForm >
255257 </NTabPane >
256258
257- <NTabPane name="batch" tab="Batch URL → PDF ">
259+ <NTabPane name="batch" : tab =" t ( ' tools.html-to-pdf.texts.tab-batch-url-pdf ' ) " >
258260 <NForm label-placement="top">
259- <NFormItem label="URLs ( one per line): ">
261+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-urls- one- per- line' ) " >
260262 <NInput
261263 v-model :value =" batchUrls "
262264 type="textarea"
@@ -271,7 +273,7 @@ async function generateBatch() {
271273 :disabled =" isBatchRunning "
272274 @click =" generateBatch "
273275 >
274- Generate PDFs
276+ {{ t('tools.html-to-pdf.texts.tag-generate-pdfs') }}
275277 </NButton >
276278 </n-space >
277279 </NForm >
@@ -289,11 +291,11 @@ async function generateBatch() {
289291 </div >
290292
291293 <!-- Results -->
292- <NCard v-if =" batchResults .length > 0 " title="Results ">
294+ <NCard v-if =" batchResults .length > 0 " : title =" t ( ' tools.html-to-pdf.texts.title-results ' ) " >
293295 <n-table >
294296 <thead >
295- <th >Url </th >
296- <th >Download </th >
297+ <th >{{ t('tools.html-to-pdf.texts.tag-url') }} </th >
298+ <th >{{ t('tools.html-to-pdf.texts.tag-download') }} </th >
297299 </thead >
298300 <tbody >
299301 <tr
@@ -311,13 +313,13 @@ async function generateBatch() {
311313 type="success"
312314 @click =" downloadBlob (item .pdfBlob ! , ` ${urlToFilename (item .url )}.pdf ` )"
313315 >
314- Download PDF
316+ {{ t('tools.html-to-pdf.texts.tag-download-pdf') }}
315317 </NButton >
316318 </template >
317319
318320 <template v-else >
319321 <NButton size="small" type="error" disabled>
320- Failed
322+ {{ t('tools.html-to-pdf.texts.tag-failed') }}
321323 </NButton >
322324 <div style =" color : red ; font-size : 12px " >
323325 {{ item.error }}
@@ -331,52 +333,52 @@ async function generateBatch() {
331333 </NTabPane >
332334
333335 <!-- Custom PDF Options -->
334- <NTabPane name="custom-options" tab="Custom PDF Options ">
336+ <NTabPane name="custom-options" : tab =" t ( ' tools.html-to-pdf.texts.tab-custom-pdf-options ' ) " >
335337 <NForm label-placement="left">
336- <NFormItem label="Format: ">
338+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-format ' ) " >
337339 <NSelect
338340 v-model :value =" options .format "
339341 :options =" pdfFormats "
340342 />
341343 </NFormItem >
342344
343- <NFormItem label="Language: ">
344- <NInput v-model :value =" options .language " placeholder="en-US " />
345+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-language ' ) " >
346+ <NInput v-model :value =" options .language " : placeholder =" t ( ' tools.html-to-pdf.texts.placeholder- en-us ' ) " />
345347 </NFormItem >
346348
347349 <n-space justify =" center" >
348- <NFormItem label="Landscape: ">
350+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-landscape ' ) " >
349351 <NSwitch v-model :value =" options .landscape " />
350352 </NFormItem >
351353
352- <NFormItem label="One Long Page: ">
354+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-one-long-page ' ) " >
353355 <NSwitch v-model :value =" options .onePage " />
354356 </NFormItem >
355357
356- <NFormItem label="Auto-Hide Cookie Banners: ">
358+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-auto-hide-cookie-banners ' ) " >
357359 <NSwitch v-model :value =" options .autoHideCookies " />
358360 </NFormItem >
359361
360- <NFormItem label="Print Background: ">
362+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-print-background ' ) " >
361363 <NSwitch v-model :value =" options .printBackground " />
362364 </NFormItem >
363365 </n-space >
364366
365- <c-card title =" Margins " >
367+ <c-card : title =" t('tools.html-to-pdf.texts.title-margins') " >
366368 <NSpace justify="center">
367- <NFormItem label="Top (mm): " style =" width : 200px " >
369+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-top-mm ' ) " style =" width : 200px " >
368370 <NInputNumber v-model :value =" options .margin .top " />
369371 </NFormItem >
370372
371- <NFormItem label="Bottom (mm): " style =" width : 200px " >
373+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-bottom-mm ' ) " style =" width : 200px " >
372374 <NInputNumber v-model :value =" options .margin .bottom " />
373375 </NFormItem >
374376
375- <NFormItem label="Left (mm): " style =" width : 200px " >
377+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-left-mm ' ) " style =" width : 200px " >
376378 <NInputNumber v-model :value =" options .margin .left " />
377379 </NFormItem >
378380
379- <NFormItem label="Right (mm): " style =" width : 200px " >
381+ <NFormItem : label =" t ( ' tools.html-to-pdf.texts.label-right-mm ' ) " style =" width : 200px " >
380382 <NInputNumber v-model :value =" options .margin .right " />
381383 </NFormItem >
382384 </NSpace >
0 commit comments