在前端開(kāi)發(fā)怎么實(shí)現(xiàn)使用動(dòng)態(tài)圖像生成文檔？生成圖像文檔方法分享！

Adobe Document Generation最吸引人的方面之一是它非常靈活。API 可以真正增強(qiáng)最終結(jié)果的一個(gè)方面是能夠在模板中包含圖像。在典型的用例中，您將提供在與 API 一起使用的數(shù)據(jù)中定義的靜態(tài)圖像。在這篇博文中，我將展示一個(gè)更高級(jí)的例子——?jiǎng)討B(tài)生成圖像，在我們的例子中是動(dòng)態(tài)生成圖表。

基礎(chǔ)知識(shí)

在我們進(jìn)入更高級(jí)的演示之前，讓我們快速介紹一下基礎(chǔ)知識(shí)。（我的同事非常深入地研究了文檔生成和圖像，您也應(yīng)該檢查一下。）正如我們的文檔所述，在 Word 模板中使用動(dòng)態(tài)圖像需要幾個(gè)步驟。

首先，您將圖像添加到文檔中。您選擇什么圖像并不重要，它只是一個(gè)占位符，但您需要根據(jù)需要將其放置在文檔中，并確保已按預(yù)期調(diào)整其大小。完成后，右鍵單擊圖像并選擇“編輯替換文字”選項(xiàng)。在該替代文本中，您提供 JSON：

JSON：

{
  "location-path" : "logo" ,
  "image-props"：{     "alt-text": "This is an alt-text for the image placeholder"
  }
}

該location-path屬性必須指向包含圖像數(shù)據(jù)的數(shù)據(jù)中使用的鍵值。例如，給定上述location-path值，我與 API 一起使用的數(shù)據(jù)可能如下所示：

JSON:

{  "name" : "Some Random Name" ,
    "age" : 48 ,
    "logo" : "<base64 encoded image>"
}

如示例所示，圖像數(shù)據(jù)必須是圖像的 Base64 編碼版本。如果你以前從未見(jiàn)過(guò)，它看起來(lái)有點(diǎn)像這樣：

 數(shù)據(jù)：圖像/png；base64，一個(gè)非常長(zhǎng)的字符列表

您還可以使用 Word Add On 為您插??入圖像。如果您添加的示例數(shù)據(jù)包含 Base64 值，則您可以在“高級(jí)”選項(xiàng)卡的“圖像”部分中選擇它。

所以此時(shí)，您已經(jīng)能夠動(dòng)態(tài)更改最終結(jié)果 PDF 或 Word 文檔中的圖像。為此，您需要換出值。想象一下，對(duì)于文檔中的圖像，您有兩個(gè)選項(xiàng)，一張貓的圖片或一張狗的圖片。在 Word 模板中，您嵌入了一個(gè)占位符圖像并將其鏈接到一個(gè)值pet. 在將您的模板和數(shù)據(jù)發(fā)送到 Document Generation API 之前，您將使用正確的值：

// data is the object you will pass to the API, it's got stuff already
if(thisPersonIsVeryCool) {
    data.pet = catBase64ImageData;
} else {
    data.pet = dogBase64ImageData;
}
// now call our API and pass the template and data

如您所見(jiàn)，根據(jù)某些特定的布爾值，數(shù)據(jù)將具有貓或狗圖片的編碼版本。（顯然一個(gè)比另一個(gè)好，當(dāng)然我說(shuō)的是貓。）

雖然這符合動(dòng)態(tài)，但我們可以更進(jìn)一步。

使用動(dòng)態(tài)圖像

對(duì)于我們的場(chǎng)景，我們將創(chuàng)建一個(gè)文檔，描述過(guò)去六個(gè)月收容所中貓的數(shù)量。這些數(shù)據(jù)是從內(nèi)部報(bào)告系統(tǒng)返回的，可以這樣表示：

JSON:

{ { 
    "numberOfCats": [
        {"date":"11/2020", "amount":210},
        {"date":"12/2020", "amount":354},
        {"date":"1/2021", "amount":321},
        {"date":"2/2021", "amount":337},
        {"date":"3/2021", "amount":298},
        {"date":"4/2021", "amount":274}
    ]
}

數(shù)據(jù)由從最舊到最新排序的值數(shù)組組成。數(shù)組中的每個(gè)項(xiàng)目都有一個(gè)日期戳和一個(gè)數(shù)字金額。讓我們從一個(gè)包含數(shù)據(jù)表的模板開(kāi)始。

就其本身而言，它既漂亮又簡(jiǎn)單，并且輸出干凈。這是生成 PDF 時(shí)的樣子：

它“有效”，但圖表可以使它更容易閱讀。您可以更清楚地看到一段時(shí)間內(nèi)的趨勢(shì)，并根據(jù)提供的數(shù)據(jù)做出更好的判斷。但是我們?nèi)绾卧?Word 模板中獲取動(dòng)態(tài)圖表呢？

首先，我們需要找到一個(gè)可以同時(shí)創(chuàng)建圖表的服務(wù)，這是至關(guān)重要的部分，讓我們可以訪(fǎng)問(wèn)圖表的原始圖像數(shù)據(jù)。你看，有大約一千種圖表服務(wù)，專(zhuān)門(mén)為網(wǎng)絡(luò)開(kāi)發(fā)人員服務(wù)。然而，許多這些圖表庫(kù)將在瀏覽器環(huán)境中以及在查看特定網(wǎng)頁(yè)的 JavaScript 時(shí)呈現(xiàn)它們的庫(kù)。我們需要的是一種創(chuàng)建實(shí)際圖像的服務(wù)，該圖像可以通過(guò)我們的服務(wù)器端代碼請(qǐng)求并轉(zhuǎn)換為 Base64。

對(duì)于我們的演示，我們將使用QuickChart。QuickChart 是圍繞開(kāi)源Chart.js包的“服務(wù)包裝器” 。它基本上采用了 Chart.js 的功能，并允許您通過(guò)制作 URL 來(lái)獲取圖表的靜態(tài)圖像。例如，考慮這個(gè) URL：

 https://quickchart.io/chart?c={type:'bar',data:{labels:['Q1','Q2','Q3','Q4'], datasets:[{label:'Users ',data:[50,60,70,180]},{label:'Revenue',data:[100,200,300,400]}]}}

您可以看到定義圖表各個(gè)方面的 URL 參數(shù)，包括類(lèi)型 ( bar)、標(biāo)簽和實(shí)際數(shù)據(jù)。你可以在這里看到結(jié)果：

雖然 URL 有點(diǎn)復(fù)雜（甚至可能更復(fù)雜），但它為我們的問(wèn)題提供了解決方案。鑒于我們擁有來(lái)自?xún)?nèi)部 API 的數(shù)據(jù)，我們所要做的就是在適用于 QuickChart 的 URL 中“重寫(xiě)”它。

我先建了那個(gè)。它接受我的有序數(shù)據(jù)并使用它在 QuickChart 上創(chuàng)建一個(gè) URL，該 URL 使用折線(xiàn)圖格式并指定特定的高度和寬度。這是那個(gè)函數(shù)：

function generateQuickChartURL(arr) {
    let labels = arr.map(d => d.date);
    let data = arr.map(d => d.amount);   
    let url = `https://quickchart.io/chart?c={type:'line',data:{labels:${JSON.stringify(labels)},datasets:[{label:'Cats',data:${JSON.stringify(data)}}]}}&width=500&height=300`;
    return url;    
}

如果我想添加更多圖表功能，比如自定義顏色，我會(huì)在這里修改。完成后，我在 Word 文檔中添加了一個(gè)占位符圖像并指定了大小。Ben 在他的精彩文章Adobe 文檔生成 API：處理圖像中將此作為技巧 6 進(jìn)行了介紹。

我要添加到此建議中的一件事是將 Word 切換為對(duì)圖像使用像素高度和寬度而不是英寸。在 Word 設(shè)置中的高級(jí)下，轉(zhuǎn)到顯示并啟用“顯示 HTML 功能的像素”：

啟用此功能后，我們可以為圖像設(shè)置特定的高度和寬度（500 x 300）并將其居中放置在表格下方。

圖片的替代文字如下所示：

{"location-path": "image"}

提醒一下，這意味著當(dāng)我們將數(shù)據(jù)傳遞給文檔生成 API 時(shí)，它會(huì)期望image密鑰包含我們圖像的 Base64 數(shù)據(jù)。我們?cè)趺醋?？還有一個(gè)功能！

JSON:

async function urlToBase64(url) {
    let resp = await fetch(url);
    let header = resp.headers.get('content-type');
    let body = await resp.arrayBuffer();
    data = 'data:' + resp.headers.get('content-type') + ';base64,' + Buffer.from(body).toString('base64');
    return data;
}

該urlToBase64函數(shù)完全符合它的要求 - 訪(fǎng)問(wèn)遠(yuǎn)程 URL，獲取數(shù)據(jù)，然后對(duì)其進(jìn)行轉(zhuǎn)換?，F(xiàn)在我們擁有了我們需要的所有部分，讓我們看一個(gè)完整的例子：

const PDFToolsSdk = require('@adobe/documentservices-pdftools-node-sdk');
const fs = require('fs');
const fetch = require('node-fetch');
(async () => {
    let input = './catreport.docx';
    let data = JSON.parse(fs.readFileSync('./cats.json'));
    let output = './catreport.pdf';
    if(fs.existsSync(output)) fs.unlinkSync(output);
    let url = generateQuickChartURL(data.numberOfCats);
    // get my image 
    data.image = await urlToBase64(url);
    await generateFromTemplate(input, data, output, './pdftools-api-credentials.json');
})();
/*I'm specifically designed to return a url for a line item chart based on my cat array - must include 'date' and 'amount'
*/
function generateQuickChartURL(arr) {
let labels = arr.map(d => d.date);
    let data = arr.map(d => d.amount);
    let url = `https://quickchart.io/chart?c={type:'line',data:{labels:${JSON.stringify(labels)},datasets:[{label:'Cats',data:${JSON.stringify(data)}}]}}&width=500&height=300`;
    return url;    
}
async function urlToBase64(url) {
    let resp = await fetch(url);
    let header = resp.headers.get('content-type');
    let body = await resp.arrayBuffer();
    data = 'data:' + resp.headers.get('content-type') + ';base64,' + Buffer.from(body).toString('base64');
    return data;
}
async function generateFromTemplate(template, data, dest, creds) {
    return new Promise((resolve, reject) => {
        // Initial setup, create credentials instance.
        const credentials =  PDFToolsSdk.Credentials
        .serviceAccountCredentialsBuilder()
        .fromFile(creds)
        .build();
        // Create an ExecutionContext using credentials.
        const executionContext = PDFToolsSdk.ExecutionContext.create(credentials);
        const documentMerge = PDFToolsSdk.DocumentMerge,
        documentMergeOptions = documentMerge.options;
        //dest determines if Word or PDF
        let format;
        let destExt = dest.split('.').pop().toLowerCase();
        if(destExt === 'docx') format = documentMergeOptions.OutputFormat.DOCX;
        else if(destExt === 'pdf') format = documentMergeOptions.OutputFormat.PDF;
        else throw('Invalid destination extension')
        // Create a new DocumentMerge options instance.
        options = new documentMergeOptions.DocumentMergeOptions(data, format);
        // Create a new operation instance using the options instance.
        const documentMergeOperation = documentMerge.Operation.createNew(options);
        // Set operation input document template from a source file.
      const input = PDFToolsSdk.FileRef.createFromLocalFile(template);
        documentMergeOperation.setInput(input);
        // Execute the operation and Save the result to the specified location.
        documentMergeOperation.execute(executionContext)
        .then(result => result.saveAsFile(dest))
        .then(() => resolve(true))
        .catch(err => {
            if(err instanceof PDFToolsSdk.Error.ServiceApiError
                || err instanceof PDFToolsSdk.Error.ServiceUsageError) {
                console.log('Exception encountered while executing operation', err);
                reject(err);
            } else {
                console.log('Exception encountered while executing operation', err);
                reject(err);
            }
        });
    });
}

從頂部開(kāi)始，我首先為我的輸入、數(shù)據(jù)和輸出指定變量。在這種情況下，我的 cat 數(shù)據(jù)是一個(gè)硬編碼的 JSON 文件，如上所示。然后我調(diào)用generateQuickChatURL我的數(shù)據(jù)并將結(jié)果分配給image值。最后，這將傳遞給generateFromTemplate使用我們的 SDK 創(chuàng)建 PDF的實(shí)用程序函數(shù) ( )。以下是最終 PDF 的外觀(guān)：

您可以在我的 GitHub 存儲(chǔ)庫(kù)中找到此腳本以及 Word 模板和 PDF 輸出：https : //github.com/cfjedimaster/document-services-demos/tree/main/chart_demo