• Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram

S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram
SAP Print Service  ·  Technical Articles

Llame al servicio de impresión BTP SAP para imprimir documentos en la aplicación BTP UI5

By s4pcademy 


en mi blog Pruebe el servicio de impresión BTP SAP con Postman, He explicado cómo SAP Print Service con cartero. En este blog, explicaré cómo usarlo para imprimir documentos en una aplicación UI5 implementada en el tiempo de ejecución de fundición en la nube BTP. Para usar un documento PDF, combinaré el código con mi blog Renderizar y ver PDF en SAP UI5 con el servicio Forms de Adobe en BTP.

Requisito previo:

1, has instalado Cliente CF .

2, has instalado Nodejs .

3, has instalado Herramienta de creación de MTA en la nube .

4, has terminado Configuración inicial para el servicio de gestión de documentos, opción de integración.

5, has terminado Repositorio de incorporación.

6, el destino de la clave de servicio CMIS se ha creado como paso 1 en Blog .

7, has instalado Código VSC (Opcional).

Pasos :

Paso 1: Generar proyecto SAPUI5 con fácil-ui5 .

Use los siguientes comandos para abrir el proyecto con código visual.

Paso 2: cambie la vista MainView.view como el siguiente código:

<View controllerName="com.sap.printui5.controller.MainView" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" displayBlock="true" xmlns="sap.m">
	<Page id="page" title="{i18n>title}" showNavButton="true">
		<content>
			<VBox width="100%" direction="Column" id="vbox0" alignContent="Center">
				<items>
					<HBox width="100%" id="hbox1">
						<items>
							<Label id="filenamel" width="200px" class="sapUiSmallMargin" text="FileName:" />
							<Input id="filename" width="200px"  editable="true" />
						</items>
					</HBox>
					<HBox id="hbox4">
						<Select id="select1" showSecondaryValues="true" width="200px" class="sapUiSmallMargin" items="{ path: '/templates' }">
							<core:ListItem id="listitem1" text="{name}" />
						</Select>
						<Button text="PDF Render" id="button2" class="sapUiSmallMargin" type="Emphasized" width="200px" press="pdfRender" />
					</HBox>
				</items>
				<HBox width="100%" id="hbox5">
					<Select id="select" showSecondaryValues="false" class="sapUiSmallMargin" width="200px" items="{ path: '/printQs' }">
						<core:ListItem id="listitem" text="{qname}" additionalText="{qdescription}" />
					</Select>
					<Button text="Send To PrintQ" id="button3" class="sapUiSmallMargin" type="Emphasized" width="200px" press="pdfPrint" />
				</HBox>
				<ScrollContainer id="scrollc1" height="100%" width="100%" horizontal="true" vertical="true">
					<FlexBox id="flexb1" direction="Column" renderType="Div" class="sapUiSmallMargin">
						<PDFViewer id="pdfview" source="{/Source}" title="{/Title}" height="{/Height}">
							<layoutData>
								<FlexItemData id="flexitemdata1" growFactor="1" />
							</layoutData>
						</PDFViewer>
					</FlexBox>
				</ScrollContainer>
			</VBox>
		</content>
	</Page>
</View>

Paso 3: cree un servicio de carpetas en la aplicación web, cree un archivo llamado FileUpload.js en el servicio de carpetas. Cambie el archivo FileUpload.js como el siguiente código:

// @ts-ignore

sap.ui.define("FileUpload", [
    "sap/ui/base/Object"
], function (ui5Object) {
    "use strict";
    return ui5Object.extend("ui5applicationmodule.service.FileUpload", {

        printDm: function (content, filename) {
            return new Promise((resolve, reject) => {
                // @ts-ignore
                var data = new FormData();
                data.append("media", content, filename)
                let request = new Request("/print/dm/api/v1/rest/print-documents", { method: "POST", body: data });
                request.headers.append("scan", "true");
                request.headers.append("If-None-Match", "*");
                request.headers.append("DataServiceVersion", "2.0");
                request.headers.append("Accept", "*/*")
                fetch(request).then(res => res.text()).then(data => resolve(data)
                ).catch(err => reject(err));

            });
        },
        printTask: function (dmId, qname, filename) {
            return new Promise((resolve, reject) => {
                var url = "/print/qm/api/v1/rest/print-tasks/".concat(dmId);
                var bodyJson = {
                    "numberOfCopies": 1,
                    "username": "test user",
                    "qname": qname,
                    "metadata": {
                        "business_metadata": {
                            "business_user": "user1",
                            "object_node_type": "object_node_1"
                        },
                        "version": 1.2
                    },
                    "printContents": [
                        {
                            "objectKey": dmId,
                            "documentName": filename
                        }
                    ]
                }
                var body = JSON.stringify(bodyJson);
                var myHeaders = new Headers();
                myHeaders.append("If-None-Match", "*");
                myHeaders.append("Content-Type", "application/json");
                var requestOptions = {
                    method: 'PUT',
                    headers: myHeaders,
                    body: body,
                    redirect: 'follow'
                };

                fetch(url, requestOptions).then(res => res.status).then(data => resolve(data)).catch(err => reject(err));
            })
        },
        getPrintq() {
            return new Promise((resolve, reject) => {
                // @ts-ignore
                const request = new Request("/print/qm/api/v1/rest/queues");
                request.headers.append("Content-Type", "application/json");
 
                // @ts-ignore
                fetch(request).then(res => res.json()).then(data => {
                    resolve(data)
                }).catch(err => {
                    reject(err);
                })

            })
        },

        render: function (template, content) {
            return new Promise((resolve, reject) => {
                // @ts-ignore
                var rendercont = btoa(content);
                var pdfcontent = {
                    embedFont: 0,
                    formLocale: "en_US",
                    formType: "print",
                    taggedPdf: 1,
                    xdpTemplate: template,
                    xmlData: rendercont
                };
                var myHeaders = new Headers();
                myHeaders.append("Content-Type", "application/json");

                var requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: JSON.stringify(pdfcontent),
                    redirect: 'follow'
                };

                fetch("/adobeapi/v1/adsRender/pdf?templateSource=storageName&TraceLevel=0", requestOptions).then(res => res.json()).then(data => {
                    const deccont = atob(data.fileContent);
                    const byteNumbers = new Array(deccont.length);
                    for (let i = 0; i < deccont.length; i++) {
                        byteNumbers[i] = deccont.charCodeAt(i);
                    }
                    const byteArray = new Uint8Array(byteNumbers);
                    const blob = new Blob([byteArray], { type: "application/pdf" });
                    const docurl = URL.createObjectURL(blob);
                    resolve(docurl);

                }).catch(err => reject(err));
            });
        },
        getTemplates: function () {
            return new Promise((resolve, reject) => {
                var request = new Request("/adobeapi/v1/forms");
                var templates = [];

                var temp = "";
                fetch(request).then(res => res.json()).then(data => {
                    data.forEach(form => {
                        temp = form.formName
                        form.templates.forEach(template => {
                            temp = temp.concat("/").concat(template.templateName);
                            templates.push({ "name": temp });
                            temp = "";
                        });
                    });
                    resolve(templates)
                }).catch(err => reject(err));
            });
        }
    });

})

Paso 4: cambie el controlador MainView.controller.js como el siguiente código:

sap.ui.define(
    ["./BaseController",
        "sap/m/MessageBox",
        "sap/base/security/URLWhitelist",
        "../service/FileUpload",
    "sap/ui/model/json/JSONModel"],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, MessageBox, URLWhitelist, FileUpload,JSONModel) {
        "use strict";

        return Controller.extend("com.sap.printui5.controller.MainView", {
            onInit: function () {
                if (!this._fileUpload) {
                    this._fileUpload =  new FileUpload();
                }
                this._fileUpload.getPrintq().then(data => { 
                  
                    
                    this.byId("select").setModel(new JSONModel({"printQs":data}) ); }).catch(err => { MessageBox.information(JSON.stringify(err)) });

                this._fileUpload.getTemplates().then(data=>{
                    var model = new JSONModel({"templates": data});
                    this.byId("select1").setModel(model);
                }).catch(err=>{
                    console.log("template is empty")
                    MessageBox.information(JSON.stringify(err))});
            },
            pdfPrint: function(){
                if (!this._fileUpload) {
                    this._fileUpload = new FileUpload();
                }
                var printQ = this.byId("select").getSelectedItem().getText();
               var filename = this.byId("filename").getValue();
               var objurl = this.byId("pdfview").getSource();
               if(objurl&&filename){
               fetch(objurl).then(r=>r.blob()).then(blob=>{
                this._fileUpload.printDm(blob,filename).then(dmid=>{
                    console.log(dmid);
                    this._fileUpload.printTask(dmid,printQ,filename).then(data=>{
                        console.log(data);
                        if(data === 204){
                            MessageBox.information("document has been sent to ".concat(printQ))
                        }
                    })
                }).catch(err=>console.log(err))
               })}else{
                MessageBox.information("Please input filename or render pdf first");
               }
            },
            pdfRender: function () {

                var printd = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><form1><LabelForm><DeliveryId>Mirum est ut animus agitatione motuque corporis excitetut.</DeliveryId><Position>Ego ille</Position><MaterialNo>Si manu vacuas</MaterialNo><Quantity>Apros tres et quidem</Quantity><Package>Mirum est</Package><QRCode>01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</QRCode></LabelForm><LabelForm><DeliveryId>Ad retia sedebam: erat in proximo non venabulum aut lancea, sed stilus et pugilares:</DeliveryId><Position>Licebit auctore</Position><MaterialNo>Proinde</MaterialNo><Quantity>Am undique</Quantity><Package>Ad retia sedebam</Package><QRCode>01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</QRCode></LabelForm><LabelForm><DeliveryId>meditabar aliquid enotabamque, ut, si manus vacuas, plenas tamen ceras reportarem.</DeliveryId><Position>Vale</Position><MaterialNo>Ego ille</MaterialNo><Quantity>Si manu vacuas</Quantity><Package>Apros tres et quidem</Package><QRCode>01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</QRCode></LabelForm></form1>";

                var filename = this.getView().byId("filename").getValue();

                if (!this._fileUpload) {
                    this._fileUpload = new FileUpload();
                };
                var template = this.byId("select1").getSelectedItem().getText();

                this._fileUpload.render(template,printd).then(url => {
                    var pdfSource= new JSONModel({
                        "Source": url,
                        "Title":  "Outbound Delivery",
                        "Height": "600px"
                    }); 
                    URLWhitelist.add("blob");
                    this.byId("pdfview").setModel(pdfSource);

                }).catch(err => {
                    console.log("render failed");
                    console.log(err);
                })

            }
        });
    }
);



Paso 5: agregue el enrutador en xs-app.json en la carpeta approuter.

{
  "welcomeFile": "uimodule/index.html",
  "authenticationMethod": "none",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^/adobeapi/(.*)$",
      "target": "/$1",
      "authenticationType": "xsuaa",
      "csrfProtection": false,
      "destination": "adobeapi"
    },
    {
      "source": "^/print/(.*)$",
      "target": "/$1",
      "authenticationType": "xsuaa",
      "csrfProtection": false,
      "destination": "printServiceApi"
    },
    {
      "source": "^/uimodule/(.*)$",
      "target": "$1",
      "authenticationType": "none",
      "localDir": "uimodule/webapp"
    }
  ]
}

Paso 6: cree el destino ‘adobeapi’ para el servicio de formularios de adobe y ‘printServiceApi’ para el servicio de impresión de SAP con el remitente del plan.

Nombre: adobeapi

Tipo: HTTP

URL: uri de la pantalla anterior

ID de cliente: uaa>idcliente. de la pantalla anterior

Secreto del cliente: uaa>clientsecret. de la pantalla anterior

URL del servicio de token: uaa>url + /oauth/token de la pantalla anterior

Usuario del servicio de token: uaa>clientid. de la pantalla anterior

Contraseña del servicio de token: uaa>clientid. de la pantalla anterior

Nombre: printServiceApi

Tipo: HTTP

URL: service_url de la pantalla anterior

ID de cliente: uaa>idcliente. de la pantalla anterior

Secreto del cliente: uaa>clientsecret. de la pantalla anterior

URL del servicio de token: uaa>url + /oauth/token de la pantalla anterior

Usuario del servicio de token: uaa>clientid. de la pantalla anterior

Contraseña del servicio de token: uaa>clientid. de la pantalla anterior

Paso 7: use el siguiente comando para compilar, implementar la aplicación en el tiempo de ejecución de fundición en la nube de BTP.

construir mbt

iniciar sesión

cf desplegar mta_archives/printui5_0.0.1.mtar

Paso 8: Probar la aplicación implementada:

Paso 9: verifique la tarea de impresión en la cola de impresión:

Los finales

¡Gracias por tu tiempo!

¡Saludos!

Jacky Liu



Source link


aplicaciónBTPdocumentosimpresiónimprimirLlameparaSAPservicioUI5

Artículos relacionados


Business Intelligence  ·  Business Trends  ·  design thinking  ·  education  ·  innovation  ·  sap apphaus  ·  smart city  ·  university
KAUST transforma el campus en una ciudad inteligente con SAP Business Technology Platform
#kyma  ·  #programming  ·  #sapbtp  ·  #SAPBuild  ·  #sapfiori  ·  #sitBLR  ·  #sitBLR2023  ·  Personal Insights
SAP Inside Track 2023 #Bengaluru – @SAP Labs India – Mi experiencia
Technical Articles
SAP CPI: CI/CD de cero a héroe – Revisión de código

Deja tu comentario Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

Nuestro viaje de innovación en SAP.iO – SAP Live Shopping Platform
Previo
Descripción del material del cliente mostrada como descripción del artículo en los documentos de ventas
Siguiente

Madrid

Calle Eloy Gonzalo, 27
Madrid, Madrid.
Código Postal 28010

México

Paseo de la Reforma 26
Colonia Juárez,  Cuauhtémoc
Ciudad de México 06600

Costa Rica

Real Cariari
Autopista General Cañas, 
San José, SJ 40104

Perú

Av. Jorge Basadre 349
San Isidro
Lima, LIM 15073

Twitter Linkedin Instagram
Copyright 2022 | All Right Reserved.
Cookies Para que este sitio funcione adecuadamente, a veces instalamos en los dispositivos de los usuarios pequeños ficheros de datos, conocidos como cookies. La mayoría de los grandes sitios web también lo hacen.
Aceptar
Cambiar ajustes
Configuración de Cookie Box
Configuración de Cookie Box

Ajustes de privacidad

Decida qué cookies quiere permitir. Puede cambiar estos ajustes en cualquier momento. Sin embargo, esto puede hacer que algunas funciones dejen de estar disponibles. Para obtener información sobre eliminar las cookies, por favor consulte la función de ayuda de su navegador. Aprenda más sobre las cookies que usamos.

Con el deslizador, puede habilitar o deshabilitar los diferentes tipos de cookies:

  • Bloquear todas
  • Essentials
  • Funcionalidad
  • Análisis
  • Publicidad

Este sitio web hará:

Este sitio web no:

  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
  • Recuerde sus detalles de inicio de sesión
  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
Guardar y cerrar