---
title: Localize a PDF Form
product: PDF Generator
description: This JavaScript demo demonstrates how to localize a PDF form by translating its content into different languages using a JSON schema, with examples available in English, German, Italian, French, and Spanish.
framework: Vue 3
source: https://surveyjs.io/pdf-generator/examples/how-to-localize-pdf-forms/vue3js
index: https://surveyjs.io/pdf-generator/examples/overview.md
---

# Localize a PDF Form (Vue 3)

Localization capabilities enable you to adapt a PDF form to the local language of the viewer. This demo shows how to translate PDF form content to any language. English, German, Italian, French, and Spanish are available as examples. Select one of these languages from the **Form language** drop-down menu and click the **Save as PDF** button to generate a localized PDF document.

To localize a PDF form, open its JSON schema and translate visible texts in it (titles, descriptions, choice texts, placeholders). Typically, properties that specify visible texts accept string values. Instead, specify the properties with objects. Each object field should indicate a locale and the field value—a translation for this locale. Refer to the survey JSON schema (the `json.js` file) for a code example.

To generate a localized PDF form, assign a required locale code to the `locale` property of the [`SurveyPDF`](/pdf-generator/documentation/api-reference/surveypdf) instance. For example, the following code applies the French locale:

```js
const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions);
surveyPdf.locale = "fr";

// In modular applications:
import { SurveyPDF } from "survey-pdf";
const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);
surveyPdf.locale = "fr";
```

Alternatively, you can specify the [`locale`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#locale) property within the survey JSON schema that you pass to the `SurveyPDF` instance:

```js
const surveyJson = {
  // ...
  "locale": "fr"
}
const pdfDocOptions = { /* ... */ };
const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions);
```

> Default PDF fonts support only Latin-based languages. Other languages require [custom fonts](/pdf-generator/examples/special-characters-in-pdf-form/).

## Files

### `public/index.html`

```html
<div style="display: flex;">
    <div id="app" style="flex: 1 1 0%; height: 100%; min-width: 0;"></div>
    <div id="pdf-preview" style="flex: 0.7 0.7 0%; display: none">
        <embed id="pdf-preview-frame" type="application/pdf" style="width:100%; height:100%;" />
    </div>
</div>
```

### `src/App.vue`

```html
<template>
    <SurveyComponent :model="survey" />
</template>
<script setup lang="ts">
    import { Model } from "survey-core";
    import { SurveyComponent } from "survey-vue3-ui";
    import "survey-core/survey-core.min.css";
    import { SurveyPDF } from "survey-pdf";
    import "./index.css";
    import { json } from "./json";

    function createSurveyPdfModel (surveyModel) {
        const surveyPDF = new SurveyPDF(json);
        if (surveyModel) {
            surveyPDF.data = surveyModel.data;
            surveyPDF.locale = surveyModel.locale;
            
            
        }
        
        return surveyPDF;
    }
    function saveSurveyToPdf (filename, surveyModel) {
        const pdfDoc = createSurveyPdfModel(surveyModel);
        if (!pdfDoc) return;
    
        pdfDoc.save(filename);
    }
    
    const previewDiv = document.getElementById("pdf-preview");
    const previewEmbed = document.getElementById("pdf-preview-frame");
    let pdfBlobUrl;
    
    function showPdfPreview(surveyModel) {
        if (!previewDiv || !previewEmbed) return;
    
        const pdfDoc = createSurveyPdfModel(surveyModel);
        if (!pdfDoc) return;
    
        pdfDoc.raw("blob").then((blob) => {
            if (pdfBlobUrl) {
                URL.revokeObjectURL(pdfBlobUrl);
            }
            pdfBlobUrl = URL.createObjectURL(blob);
            previewEmbed.setAttribute("src", pdfBlobUrl);
            previewDiv.style.display = "block";
        });
    }
    
    function previewPdf(surveyModel) {
        if (!previewDiv) return;
    
        if (previewDiv.style.display !== "none") {
            previewDiv.style.display = "none";
            return;
        }
    
        showPdfPreview(surveyModel);
    }
    
    const survey = new Model(json);
    survey.showCompleteButton = false;
    survey.navigationButtonsLocation = "topBottom";
    survey.addNavigationItem({
        id: "survey_save_as_file",
        title: "Download PDF",
        action: () => {
            saveSurveyToPdf("surveyResult.pdf", survey);
        }
    });
    survey.addNavigationItem({
        id: "survey_pdf_preview",
        title: "Preview PDF",
        visible: window.navigator.pdfViewerEnabled,
        action: () => {
            previewPdf(survey);
        }
    });
    survey.data = {
        "nps-score": 9,
        "promoter-features": [
            "performance",
            "ui"
        ],
        "rebuy": true,
        "testimonial": "yes",
        "email": "john.doe@example.org"
    };
    survey.locale = "it";
</script>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/json.ts`

```ts
export const json = {
  "completedHtmlOnCondition": [
    {
      "expression": "{nps-score} <= 6 or {rebuy} = false",
      "html": {
        "default": "Thanks for your feedback! We highly value all ideas and suggestions from our customers, whether they're positive or critical. In the future, our team might reach out to you to learn more about how we can further improve our product so that it exceeds your expectations.",
        "fr": "Merci pour vos commentaires! Nous accordons une grande importance à toutes les idées et suggestions de nos clients, qu'elles soient positives ou critiques. À l'avenir, notre équipe pourrait vous contacter pour en savoir plus sur la façon dont nous pouvons encore améliorer notre produit afin qu'il dépasse vos attentes.",
        "de": "Vielen Dank für Ihr Feedback! Wir schätzen alle Ideen und Vorschläge unserer Kunden sehr, egal ob positiv oder kritisch. In Zukunft wird sich unser Team möglicherweise mit Ihnen in Verbindung setzen, um mehr darüber zu erfahren, wie wir unser Produkt weiter verbessern können, damit es Ihre Erwartungen übertrifft.",
        "es": "¡Gracias por tus comentarios! Valoramos mucho todas las ideas y sugerencias de nuestros clientes, ya sean positivas o críticas. En el futuro, nuestro equipo podría comunicarse con usted para obtener más información sobre cómo podemos mejorar aún más nuestro producto para que supere sus expectativas.",
        "it": "Grazie per il tuo feedback! Apprezziamo molto tutte le idee e i suggerimenti dei nostri clienti, siano essi positivi o critici. In futuro, il nostro team potrebbe contattarti per saperne di più su come possiamo migliorare ulteriormente il nostro prodotto in modo che superi le tue aspettative."
      }
    },
    {
      "expression": "{nps-score} = 6 or {nps-score} = 7",
      "html": {
        "default": "Thanks for your feedback. Our goal is to create the best possible product, and your thoughts, ideas, and suggestions play a major role in helping us identify opportunities to improve.",
        "fr": "Merci pour vos commentaires. Notre objectif est de créer le meilleur produit possible, et vos réflexions, idées et suggestions jouent un rôle majeur pour nous aider à identifier les opportunités d'amélioration.",
        "de": "Vielen Dank für Ihr Feedback. Unser Ziel ist es, das bestmögliche Produkt zu schaffen, und Ihre Gedanken, Ideen und Vorschläge spielen eine wichtige Rolle dabei, uns dabei zu helfen, Verbesserungsmöglichkeiten zu erkennen.",
        "es": "Gracias por tus comentarios. Nuestro objetivo es crear el mejor producto posible, y sus pensamientos, ideas y sugerencias juegan un papel importante para ayudarnos a identificar oportunidades para mejorar.",
        "it": "Grazie per il tuo feedback Il nostro obiettivo è creare il miglior prodotto possibile e i tuoi pensieri, idee e suggerimenti svolgono un ruolo importante nell'aiutarci a identificare le opportunità di miglioramento."
      }
    },
    {
      "expression": "{nps-score} >= 8",
      "html": {
        "default": "Thanks for your feedback. It's great to hear that you're a fan of our product. Your feedback helps us discover new opportunities to improve it and make sure you have the best possible experience.",
        "fr": "Merci pour vos commentaires. Nous sommes ravis d'entendre que vous avez apprécié notre produit. Vos commentaires nous aident à découvrir de nouvelles opportunités pour l'améliorer et vous assurer la meilleure expérience possible.",
        "de": "Vielen Dank für Ihr Feedback. Es ist schön zu hören, dass Sie ein Fan unseres Produkts sind. Ihr Feedback hilft uns, neue Verbesserungsmöglichkeiten zu entdecken und sicherzustellen, dass Sie das bestmögliche Erlebnis haben.",
        "es": "Gracias por tus comentarios. Es fantástico saber que eres fanático de nuestro producto. Sus comentarios nos ayudan a descubrir nuevas oportunidades para mejorarlo y asegurarnos de que tenga la mejor experiencia posible.",
        "it": "Grazie per il tuo feedback È bello sapere che sei un fan del nostro prodotto. Il tuo feedback ci aiuta a scoprire nuove opportunità per migliorarlo e assicurarci che tu abbia la migliore esperienza possibile."
      }
    }
  ],
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "rating",
          "name": "nps-score",
          "title": {
            "default": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
            "fr": "Sur une échelle de 0 à 10, quelle est la probabilité que vous recommandiez notre produit à un ami ou à un collègue?",
            "de": "Auf einer Skala von 0 bis 10, wie wahrscheinlich ist es, dass Sie uns einem Freund oder Kollegen weiterempfehlen?",
            "es": "En una escala de 0 a 10, ¿qué probabilidades hay de que nos recomiende a un amigo o colega?",
            "it": "Su una scala da 0 a 10, quanto è probabile che ci consiglieresti ad un amico o collega?"
          },
          "rateMin": 0,
          "rateMax": 10
        },
        {
          "type": "comment",
          "name": "disappointing-experience",
          "visibleIf": "{nps-score} <= 5",
          "title": {
            "default": "How did we disappoint you and what can we do to make things right?",
            "fr": "Nous n'avons pas été a la hauteur de vos attentes, comment pouvons-nous améliorer?",
            "de": "Wie haben wir Sie enttäuscht und was können wir tun, um die Dinge wieder in Ordnung zu bringen?",
            "es": "¿Cómo te decepcionamos y qué podemos hacer para arreglar las cosas?",
            "it": "In che modo ti abbiamo deluso e cosa possiamo fare per sistemare le cose?"
          },
          "maxLength": 300
        },
        {
          "type": "comment",
          "name": "improvements-required",
          "visibleIf": "{nps-score} >= 6",
          "title": {
            "default": "What can we do to make your experience more satisfying?",
            "fr": "Que pouvons-nous faire pour rendre votre expérience plus satisfaisante?",
            "de": "Was können wir tun, um Ihr Erlebnis zufriedenstellender zu gestalten?",
            "es": "¿Qué podemos hacer para que tu experiencia sea más satisfactoria?",
            "it": "Cosa possiamo fare per rendere la tua esperienza più soddisfacente?"
          },
          "maxLength": 300
        },
        {
          "type": "checkbox",
          "name": "promoter-features",
          "visibleIf": "{nps-score} >= 9",
          "title": {
            "default": "Which of the following features do you value the most?",
            "fr": "Laquelle des fonctionnalités suivantes appréciez-vous le plus ?",
            "de": "Welche der folgenden Funktionen schätzen Sie am meisten?",
            "es": "¿Cuál de las siguientes características valoras más?",
            "it": "Quale delle seguenti caratteristiche apprezzi di più?"
          },
          "description": {
            "default": "Please select no more than three features.",
            "fr": "Veuillez ne pas sélectionner plus de trois fonctionnalités.",
            "de": "Bitte wählen Sie nicht mehr als drei Funktionen aus.",
            "es": "Seleccione no más de tres funciones.",
            "it": "Seleziona non più di tre funzionalità."
          },
          "isRequired": true,
          "choices": [
            {
              "value": "performance",
              "text": {
                "default": "Performance",
                "de": "Leistung",
                "es": "Actuación",
                "it": "Prestazione"
              }
            },
            {
              "value": "stability",
              "text": {
                "default": "Stability",
                "fr": "Stabilité",
                "de": "Stabilität",
                "es": "Estabilidad",
                "it": "Stabilità"
              }
            },
            {
              "value": "ui",
              "text": {
                "default": "User interface",
                "fr": "Interface utilisateur",
                "de": "Benutzeroberfläche",
                "es": "Interfaz de usuario",
                "it": "Interfaccia utente"
              }
            },
            {
              "value": "complete-functionality",
              "text": {
                "default": "Complete functionality",
                "fr": "Ensemble des fonctionnalités",
                "de": "Vollständige Funktionalität",
                "es": "Funcionalidad completa",
                "it": "Funzionalità completa"
              }
            },
            {
              "value": "learning-materials",
              "text": {
                "default": "Learning materials (documentation, demos, code examples)",
                "fr": "Matériel d'apprentissage (documentation, démos, exemples de code)",
                "de": "Lernmaterialien (Dokumentation, Demos, Codebeispiele)",
                "es": "Materiales de aprendizaje (documentación, demostraciones, ejemplos de código)",
                "it": "Materiali didattici (documentazione, demo, esempi di codice)"
              }
            },
            {
              "value": "support",
              "text": {
                "default": "Quality support",
                "fr": "Accompagnement de qualité",
                "de": "Qualitätsunterstützung",
                "es": "Soporte de calidad",
                "it": "Supporto di qualità"
              }
            }
          ],
          "showOtherItem": true,
          "otherPlaceholder": {
            "default": "Please specify...",
            "fr": "Veuillez préciser...",
            "de": "Bitte angeben...",
            "es": "Por favor especifica...",
            "it": "Per favore specificare..."
          },
          "otherText": {
            "default": "Other features",
            "fr": "Autres fonctionnalités",
            "de": "Andere Eigenschaften",
            "es": "Otras características",
            "it": "Altre caratteristiche"
          },
          "colCount": 2,
          "maxSelectedChoices": 3
        }
      ]
    },
    {
      "name": "page2",
      "elements": [
        {
          "type": "boolean",
          "name": "rebuy",
          "title": {
            "default": "Would you buy our product again?",
            "fr": "Achèteriez-vous à nouveau notre produit?",
            "de": "Würden Sie unser Produkt wieder kaufen?",
            "es": "¿Comprarías nuestro producto nuevamente?",
            "it": "Compreresti di nuovo il nostro prodotto?"
          }
        }
      ]
    },
    {
      "name": "page3",
      "elements": [
        {
          "type": "radiogroup",
          "name": "testimonial",
          "title": {
            "default": "Would you mind providing us a brief testimonial for the website?",
            "fr": "Accepteriez-vous de rédiger un bref commentaire pour notre site Internet?",
            "de": "Würde es Ihnen etwas ausmachen, uns ein kurzes Testimonial für die Website zu geben?",
            "es": "¿Le importaría brindarnos un breve testimonio sobre el sitio web?",
            "it": "Ti dispiacerebbe fornirci una breve testimonianza per il sito web?"
          },
          "choices": [
            {
              "value": "yes",
              "text": {
                "default": "Sure!",
                "fr": "Bien sur!",
                "de": "Sicher!",
                "es": "¡Seguro!",
                "it": "Certamente!"
              }
            },
            {
              "value": "no",
              "text": {
                "default": "No",
                "fr": "Non merci.",
                "de": "Nein",
                "es": "No",
                "it": "No"
              }
            }
          ]
        },
        {
          "type": "text",
          "name": "email",
          "visibleIf": "{testimonial} = 'yes'",
          "title": {
            "default": "What is your email address?",
            "fr": "Quelle est votre adresse e-mail?",
            "de": "Wie lautet deine E-Mail Adresse?",
            "es": "¿Cuál es tu dirección de correo electrónico?",
            "it": "Qual è il tuo indirizzo e-mail?"
          },
          "validators": [
            {
              "type": "email"
            }
          ],
          "placeholder": {
            "default": "Enter your email here",
            "fr": "Veuillez saisir votre adresse e-mail ici",
            "de": "Gib deine E-Mail hier ein",
            "es": "Introduzca su correo electrónico aquí",
            "it": "Inserisci la tua email qua"
          }
        }
      ]
    }
  ],
  "questionsOnPageMode": "singlePage"
};
```

### `src/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `src/theme.ts`

```ts
export const themeJson = {};
```

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "survey-core": "latest",
    "survey-pdf": "latest",
    "survey-vue3-ui": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/pdf-generator/examples/how-to-localize-pdf-forms/angular.md)
- [React](https://surveyjs.io/pdf-generator/examples/how-to-localize-pdf-forms/reactjs.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/how-to-localize-pdf-forms/jquery.md)
- [Vanilla JS](https://surveyjs.io/pdf-generator/examples/how-to-localize-pdf-forms/vanillajs.md)