Export single credential as PDF #518

kayaelle · 2023-10-23T19:08:37Z

On a dedicated single credential share window: Add an "Export as PDF" option below the create public link area (or below unshare/view link buttons if a link has been created. Please use a PDF icon in the button.

Requirements:

Only display the Export as PDF option if renderMethod is included in a credential, a link to an svg template is available in renderMethod and the svg file is readable, apply credential data to variables indicated in the svg template and render pdf to be downloaded using native mobile device dialog for saving/sharing.

Otherwise, the option should not exist. Let's include this in the testing script for LCW -- please let me know if a new issue is needed for that.

If css3MediaQuery is present in renderMethod, reference that css when rendering (the first credential we'll test with will contain CSS to indicate portrait display)

Needed for this issue:

Sample SVG Template
Signed Credential including renderMethod and SVG template

Resources & Tools:

Verifiable Credential Rendering Methods: https://w3c-ccg.github.io/vc-render-method/#svgrenderingtemplate2023
DCC create test credentials: https://issuer.dcconsortium.org/ui

Please add this to testing script.

kayaelle · 2023-10-24T19:40:24Z

@jmcioffi4 @IsaacAirmet1 @lautom36 here are files:

SVG template: https://raw.githubusercontent.com/digitalcredentials/test-files/main/svg-templates/tec-de-monterrey-pdf-sample-1.svg
Signed credential including renderMethod: https://github.com/digitalcredentials/test-files/blob/main/signed-example-credentials/svg-templates/tec-de-monterrey-pdf-sample-1-svg-signed.json

jennacioffi · 2023-10-25T18:44:55Z

PR: #523

kayaelle · 2023-11-01T15:16:46Z

@dmitrizagidulin & @lautom36 Keeping this in In Progress status because we will continue to test with more complex templates and scenarios.

kayaelle · 2023-11-13T20:24:04Z

Adding more complex model:

signed credential: https://raw.githubusercontent.com/digitalcredentials/test-files/main/signed-example-credentials/svg-templates/tec-de-monterrey-pdf-sample-2-svg-signed.json

SVG template: https://github.com/digitalcredentials/test-files/blob/main/svg-templates/tec-de-monterrey-pdf-sample-2.svg

certificados.tec.mx_certificate_027aaf97239557958a1d3d38ea794a2d.pdf

dmitrizagidulin · 2024-01-18T19:52:11Z

Sample HTML template from Atomic Jolt:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0; /* Optional: Set a background color */
        }

        .main-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 80%;
            padding: 20px;
            box-sizing: border-box;
        }

        .main-container img {
            /* Add styles for the image if needed */
        }

        h2 {
            margin: 10px 0;
        }

        .signatures-container {
            display: flex;
            justify-content: space-evenly;
            width: 90%;
            margin-top: 20px; /* Adjust as needed */
        }

        .signature {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        p {
            text-align: center;
            margin: 10px 0;
        }
    </style>
</head>
<body>

<div class="main-container">
    <div>image would go here</div>
    <p>concede a</p>
    <h2>{{ credential.subject.name }}</h2>
    <p>el titulo profesional de</p>
    <h2>{{ credential.name }}</h2>
    <p>considerando que ha cumplido con los estudios correspondientes y satisfecho todas los requisitos necesarios.</p>
    <p>Dado en la ciudad de Monterrey, estado de Nuevo León, el dia</p>
    <p>{{ credential.awardedDate }}</p>
    <div class="signatures-container">
        <div class="signature">sig 1 <p>Rector y Presidente Ejecutivo</p></div>
        <div class="signature">sig 2 <p>Rector de Profesional y Posgrado</p></div> 
    </div>
    <p>Titulo Electronico folio control: {{ credential.evidence[0].narrative }}</p>
    <p>Sello Autenticocion:</p>
    <p>{{ credential.evidence[1].narrative }}</p>
    <p>No. Certifico Autoridad:</p>
    <p>{{ credential.evidence[2].narrative }}</p>
</div>

</body>
</html>

kayaelle · 2024-03-05T17:21:31Z

Example credential: https://raw.githubusercontent.com/digitalcredentials/test-files/main/example-credentials-unsigned/render-method/tec-de-monterrey-unsigned-html-template.json

Wallet isn't showing export as expected.

kayaelle · 2024-03-05T22:43:57Z

Updating label to priority because we need this for Tec pilot.

kayaelle · 2024-03-13T14:40:53Z

Dmitri exploring and debugging currently.

dmitrizagidulin · 2024-03-14T00:46:05Z

Signed credential:

{
  "name": "Título Profesional e21.02",
  "type": [
    "VerifiableCredential",
    "OpenBadgeCredential"
  ],
  "id": "urn:uuid:951b475e-b795-43bc-ba8f-a2d01efd2eb1",
  "issuer": {
    "id": "did:key:z6MkjSdgaUNWTQsH8RbkrNoxk98ZA2FHQsyEFEcHAEGhk3dB",
    "url": "https://tec.mx/es",
    "type": "Profile",
    "name": "Instituto Tecnológico y de Estudios superiores de Monterrey",
    "image": {
      "id": "https://coursereport-production.imgix.net/uploads/school/logo/490/original/logo-tecnolo-cc-81gico-monterrey-boot-camp-20.jpg",
      "type": "Image"
    }
  },
  "@context": [
    "https://www.w3.org/2018/credentials/v1",
    "https://purl.imsglobal.org/spec/ob/v3p0/context-3.0.1.json",
    {
      "renderMethod": "urn:uuid:b2ab3546-228a-47a8-b97a-9a5646007c53",
      "css3MediaQuery": "urn:uuid:c4c53282-e8e2-4914-83d8-566e25d2f899",
      "digestMultibase": "urn:uuid:caef1a4e-67b8-4dfc-9881-2b51da7edc1b"
    },
    "https://w3id.org/security/suites/ed25519-2020/v1"
  ],
  "issuanceDate": "2020-12-16T00:00:00Z",
  "credentialSubject": {
    "type": [
      "AchievementSubject"
    ],
    "name": "Adolfo Daniel Javier Alberto Giese-Caballero Benavides",
    "achievement": {
      "type": [
        "Achievement"
      ],
      "id": "urn:uuid:7d9f1061-81b4-48d5-b6eb-6524c4074146",
      "name": "Título Profesional",
      "criteria": {
        "type": "Criteria",
        "narrative": "Javier Alberto Giese Ruiz has fulfilled the requirements to earn this degree. -- do we want to include other criteria here?"
      },
      "description": "Description content here?",
      "fieldOfStudy": "Ingeniero en Sistemas Electrónicos",
      "achievementType": "BachelorDegree"
    },
    "id": "did:key:z6MkpCSjiYdZe55pvraC8N9SNxthqtMfJQUry3Yhk8XwZ7co"
  },
  "evidence": [
    {
      "type": "Evidence",
      "name": "Título Electrónico Folio Control",
      "narrative": "M-A00500923-5"
    },
    {
      "type": "Evidence",
      "name": "Sello Autenticación",
      "narrative": "RzWvSLK1vpxOltu/71LeuuoxC6lDJ0vEocVHjUjItgSj+GH50KophCABW3ZqPEVhIxEJ1dQAPS3TsNz+UepJu6EK4B2Y36+Z+D3j4bRCmBkdA/IQVd97Sp7itv9XUsgNIZicMEfrufhkrPCVvS7aOJ+nicISpU86lnZwAAU27HSw+5ca2hZ1OQ6an0bvd8/cPgsclldHUWsiSUsPESyoCeurd1nT03LoEwX4WrgQT6xSY+2HixOgGPWiR7mQV5tIlnNZvhT1BsGCMwr7XsL3Pbdgo2QCMYx1cRDatMWydjyMdRvgU/mAaHwdncxv1nAORfxruIFgr9W2Gjvi4OOyAQ=="
    },
    {
      "type": "Evidence",
      "name": "No. Certificado Autoridad",
      "narrative": "00001000000123456789"
    },
    {
      "type": "Evidence",
      "name": "Sello Titulo",
      "narrative": "Hjru5ABq7bOaDK5khME3A163xwNx2uHhX/3gRZ+0MM80i0Eok2v+7SbBhGGZ8ZDxDFrY6kusMXYWvw7rZidv9ZiBjJfp9YIYqixmvSEFtUfBhN/MZOF/tP7zhGRNPELu31GKE2jIyN7jAZB30xf7XOlZoIBuxPsiUljGcqaCStzdofOpJiN+NqvlzMs/LMYwny7OrIE5w65lPHbuocMl1nqlMGwfWioSbnHu8x52DQWa65VMEiknLTfMerZJ06ly7q/mI8tDpKgIAuhVY6WwN9c/8qrbGGZ2qqDCZmyiB75bjWQBIwMBXTV4QnfSnIy1tPbTra43utMkkb+ZhaFbUQ=="
    },
    {
      "type": "Evidence",
      "name": "Fecha Autenticacion",
      "narrative": "1/27/2020 17:22:22"
    },
    {
      "type": "Evidence",
      "name": "Folio Digital",
      "narrative": "701a5cf8-67va-4452-abc8-c18b1bb94be1"
    }
  ],
  "renderMethod": [
    {
      "id": "https://raw.githubusercontent.com/digitalcredentials/docs/main/credential-render-examples/tec-de-monterrey-test-example-template.html",
      "type": "SvgRenderingTemplate2023",
      "name": "PDF Display",
      "css3MediaQuery": "@media (orientation: portrait)"
    }
  ],
  "proof": {
    "type": "Ed25519Signature2020",
    "created": "2024-03-14T00:52:35Z",
    "verificationMethod": "did:key:z6MkjSdgaUNWTQsH8RbkrNoxk98ZA2FHQsyEFEcHAEGhk3dB#z6MkjSdgaUNWTQsH8RbkrNoxk98ZA2FHQsyEFEcHAEGhk3dB",
    "proofPurpose": "assertionMethod",
    "proofValue": "z4SRn6FmbibfTrbj9KUceRcFYS9rEJJ8vAyCvARz2MK5LnSsvuBwtutZbPooR2Ra6iB4a3EzR871m75QDbBLfrMpc"
  }
}

alexfigtree · 2024-03-15T19:39:20Z

Implemented, last fix for it is in PR #599

kayaelle · 2024-03-20T16:04:01Z

Tried testing on testflight with this credential:

{
"@context": [
"https://www.w3.org/2018/credentials/v1",
"https://purl.imsglobal.org/spec/ob/v3p0/context-3.0.1.json",
{
"renderMethod": "urn:uuid:b2ab3546-228a-47a8-b97a-9a5646007c53",
"css3MediaQuery": "urn:uuid:c4c53282-e8e2-4914-83d8-566e25d2f899",
"digestMultibase": "urn:uuid:caef1a4e-67b8-4dfc-9881-2b51da7edc1b"
},
"https://w3id.org/security/suites/ed25519-2020/v1"
],
"type": [
"VerifiableCredential",
"OpenBadgeCredential"
],
"id": "urn:uuid:951b475e-b795-43bc-ba8f-a2d01efd2eb1",
"issuanceDate": "2020-01-01T00:00:00Z",
"name": "Sam Smith - Bachelor of Science in Computer Science",
"issuer": {
"id": "did:key:z6MknNQD1WHLGGraFi6zcbGevuAgkVfdyCdtZnQTGWVVvR5Q",
"url": "https://web.mit.edu/",
"type": "Profile",
"name": "Massachusetts Institute of Technology",
"image": {
"id": "https://github.com/digitalcredentials/test-files/assets/206059/01eca9f5-a508-40ac-9dd5-c12d11308894",
"type": "Image"
}
},
"credentialSubject": {
"type": [
"AchievementSubject"
],
"name": "Sam Smith",
"achievement": {
"type": [
"Achievement"
],
"id": "urn:uuid:951b475e-b795-43bc-ba8f-a2d01efd2eb1",
"achievementType": "BachelorDegree",
"name": "Bachelor of Science in Computer Science",
"fieldOfStudy": "Computer Science",
"criteria": {
"type": "Criteria",
"narrative": "IN RECONITION OF PROFICIENCY IN THE GENERAL AND THE SPECIAL STUDIES AND EXERCISES PRESCRIBED BY SAID INSTITUTION FOR SUCH MOCK DEGREE GIVEN THIS DAY UNDER THE SEAL OF THE INSTITUTE AT CAMBRIDGE IN THE COMMONWEALTH OF MASSACHUSETTS"
},
"description": "Massachusetts Institute of Technology Bachelor of Science in Computer Science"
},
"renderMethod": [
{
"id": "https://raw.githubusercontent.com/digitalcredentials/test-files/main/html-templates/mock-MIT-bachelors-template.html",
"type": "SvgRenderingTemplate2023",
"name": "PDF Display",
"css3MediaQuery": "@media (orientation: portrait)"
}
],
"id": "did:key:z6MkpCSjiYdZe55pvraC8N9SNxthqtMfJQUry3Yhk8XwZ7co"
},
"proof": {
"type": "Ed25519Signature2020",
"created": "2024-03-20T13:56:29Z",
"verificationMethod": "did:key:z6MknNQD1WHLGGraFi6zcbGevuAgkVfdyCdtZnQTGWVVvR5Q#z6MknNQD1WHLGGraFi6zcbGevuAgkVfdyCdtZnQTGWVVvR5Q",
"proofPurpose": "assertionMethod",
"proofValue": "zkAAvu1LN61hzd9igiqu2Pxzq9Hy8vfTYDNMhAgcKoe8e6CsyCpWcoHQWDU4H1wX6fJPPsgH8t2u3CsTC9u1T346"
}
}

The export as PDF button isn't available in the share screen

dmitrizagidulin · 2024-03-20T17:15:35Z

@kayaelle In the template, change {{ credential.fieldOfStudy }} to {{ credential.credentialSubject.fieldOfStudy }}

alexfigtree · 2024-03-23T01:35:43Z

Deployed in 2.0.23, closing this ticket

kayaelle assigned jbasdf, jennacioffi, lautom36 and IsaacAirmet1 Oct 23, 2023

kayaelle changed the title ~~Export Single Credential as PDF~~ Export single credential as PDF Oct 23, 2023

This was referenced Oct 23, 2023

Planning Issue - Create PDF from one or more shared credentials #417

Closed

Export credential as PDF from general share window #519

Open

dmitrizagidulin mentioned this issue Oct 25, 2023

Create a 'render-method-parser' library #522

Open

jennacioffi mentioned this issue Oct 25, 2023

(Issue #518) SVG to PDF conversion code #523

Merged

kayaelle assigned dmitrizagidulin and unassigned jbasdf, jennacioffi, lautom36 and IsaacAirmet1 Jan 29, 2024

kayaelle added the priority label Mar 5, 2024

alexfigtree mentioned this issue Mar 8, 2024

Alternate Display of credentials #413

Closed

dmitrizagidulin mentioned this issue Mar 14, 2024

Fix PDF generation Share call. #599

Merged

alexfigtree closed this as completed Mar 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Export single credential as PDF #518

Export single credential as PDF #518

kayaelle commented Oct 23, 2023 •

edited

Loading

kayaelle commented Oct 24, 2023 •

edited

Loading

jennacioffi commented Oct 25, 2023

kayaelle commented Nov 1, 2023

kayaelle commented Nov 13, 2023 •

edited

Loading

dmitrizagidulin commented Jan 18, 2024

kayaelle commented Mar 5, 2024 •

edited

Loading

kayaelle commented Mar 5, 2024

kayaelle commented Mar 13, 2024

dmitrizagidulin commented Mar 14, 2024 •

edited

Loading

alexfigtree commented Mar 15, 2024

kayaelle commented Mar 20, 2024

dmitrizagidulin commented Mar 20, 2024

alexfigtree commented Mar 23, 2024

Export single credential as PDF #518

Export single credential as PDF #518

Comments

kayaelle commented Oct 23, 2023 • edited Loading

kayaelle commented Oct 24, 2023 • edited Loading

jennacioffi commented Oct 25, 2023

kayaelle commented Nov 1, 2023

kayaelle commented Nov 13, 2023 • edited Loading

dmitrizagidulin commented Jan 18, 2024

kayaelle commented Mar 5, 2024 • edited Loading

kayaelle commented Mar 5, 2024

kayaelle commented Mar 13, 2024

dmitrizagidulin commented Mar 14, 2024 • edited Loading

alexfigtree commented Mar 15, 2024

kayaelle commented Mar 20, 2024

dmitrizagidulin commented Mar 20, 2024

alexfigtree commented Mar 23, 2024

kayaelle commented Oct 23, 2023 •

edited

Loading

kayaelle commented Oct 24, 2023 •

edited

Loading

kayaelle commented Nov 13, 2023 •

edited

Loading

kayaelle commented Mar 5, 2024 •

edited

Loading

dmitrizagidulin commented Mar 14, 2024 •

edited

Loading