Autodesk Forge Viewer v7：打开 PDF

Question

I have some questions to the Viewer v7 and I cannot find any answers in the tutorials an API-References.我对 Viewer v7 有一些疑问，但在 API 参考教程中找不到任何答案。

What I want to do: I want to upload PDFs to Forge using Forge Datamanagment API and then open it via the Viewer我想要做什么：我想使用 Forge Datamanagment API 将 PDF 上传到 Forge，然后通过查看器打开它

What I have managed to do so far : I managed to upload PDF files to Forge and translate it to SVF.到目前为止我所做的：我设法将 PDF 文件上传到 Forge 并将其转换为 SVF。

However, so far, when I want to open the PDF using the Viewer I just get a blank page.但是，到目前为止，当我想使用查看器打开 PDF 时，我只会得到一个空白页面。 I have followed this tutorial and additionally I added the extension Autodesk.PDF .我遵循了本教程，另外我添加了扩展Autodesk.PDF 。 So this is what my code looks like:所以这就是我的代码的样子：

Autodesk.Viewing.Initializer(options, () => {
   this.viewer = new Autodesk.Viewing.GuiViewer3D(this.viewerDiv);
   this.viewer.loadExtension("Autodesk.PDF").then(() => {
        const startedCode = this.viewer.start();
        if (startedCode > 0) {
            console.error('Failed to create a Viewer: WebGL not supported.');
            return;
        }
        Autodesk.Viewing.Document.load(urn, (doc) => this.onDocumentLoadSuccess(doc), (err) => this.onDocumentLoadFailure(err));
   });
});

onDocumentLoadSuccess(doc) {
   var defaultModel = doc.getRoot().getDefaultGeometry();
   this.viewer.loadDocumentNode(doc, defaultModel);
}

onDocumentLoadFailure(viewerErrorCode) {
   this.handleError('Error loading document', viewerErrorCode);
}

For IFC files this works fine but not for PDF files.对于 IFC 文件，这可以正常工作，但不适用于 PDF 文件。

I have seen some tutorials using the loadModel function, which takes as input an URL, to open PDF files without even translating them.我看过一些使用loadModel函数的教程，该函数将 URL 作为输入，打开 PDF 文件甚至无需翻译它们。

So here are my questions:所以这里是我的问题：

Do I even need to translate my PDF files to open it in the Viewer?我什至需要翻译我的 PDF 文件才能在查看器中打开它吗？
Why does the Viewer work for IFC Files but not for PDF files although the translation to SVF succeeds?为什么查看器可用于 IFC 文件，但不能用于 PDF 文件，尽管转换为 SVF 成功？
Can I use the loadModel function also with an URN (so the base64 endcoded objectId)?我loadModel也可以将loadModel函数与 URN 一起使用（因此是 base64 编码的 objectId）？

Thanks in advance提前致谢

Answer 1

Q1: Do I even need to translate my PDF files to open it in the Viewer? Q1：我什至需要翻译我的 PDF 文件才能在查看器中打开它吗？

A1: Yes! A1：是的！ According to Forge Viewer's Term of Usage, the Autodesk Forge viewer can only be used to view files generated by Autodesk Forge services根据 Forge Viewer 的使用条款，Autodesk Forge 查看器只能用于查看由 Autodesk Forge 服务生成的文件

/*!
 * LMV v7.6.1
 * 
 * Copyright 2019 Autodesk, Inc.
 * All rights reserved.
 * 
 * This computer source code and related instructions and comments are the
 * unpublished confidential and proprietary information of Autodesk, Inc.
 * and are protected under Federal copyright and state trade secret law.
 * They may not be disclosed to, copied or used by any third party without
 * the prior written consent of Autodesk, Inc.
 * 
 * Autodesk Forge Viewer Usage Limitations:
 * 
 * The Autodesk Forge viewer can only be used to view files generated by
 * Autodesk Forge services. The Autodesk Forge Viewer JavaScript must be
 * delivered from an Autodesk hosted URL.
 */

Q2: Why does the Viewer work for IFC Files but not for PDF files although the translation to SVF succeeds?问题 2：为什么查看器可以查看 IFC 文件，但不能查看 PDF 文件，尽管转换为 SVF 成功？

A2: Please provide the error message from the GET:urn/manifest A2：请提供GET:urn/manifest 中的错误信息

Q3: Can I use the loadModel function also with an URN (so the base64 endcoded objectId)?问题 3：我可以将 loadModel 函数也用于 URN（因此是 base64 编码的 objectId）吗？

A3: Yes, if I understand it correctly. A3：是的，如果我理解正确的话。 Here is the code snippet, and the screencast: https://knowledge.autodesk.com/community/screencast/de6b2d2a-c6b3-4747-8664-bd79cf417765这是代码片段和截屏视频： https : //knowledge.autodesk.com/community/screencast/de6b2d2a-c6b3-4747-8664-bd79cf417765

<!DOCTYPE html>
<html>
  <head>
    <title>PDF Viewer</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta charset="utf-8">

    <!-- The Viewer CSS -->
    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.6.*/style.min.css" type="text/css">
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      /* Create two unequal columns that floats next to each other */
      .column {
        float: left;
        height: 100vh;
      }

      .left {
        width: 10%;
      }

      .right {
        width: 90%;
      }

      /* Clear floats after the columns */
      .row:after {
        content: "";
        position: relative;
        display: inline-block;
        clear: both;
      }

      #pdf-pages-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
      }

      #pdf-pages-wrapper ul {
        padding-left: 20px;
      }

      #pdf-pages-wrapper a {
        color: black;
        text-decoration: none;
      }

      #pdf-pages-wrapper a.active {
        font-weight: bold;
        color: blue;
        text-decoration: underline;
      }

      #viewer {
        position: relative;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="row">
      <div class="column left">
        <div id="pdf-pages-wrapper"></div>
      </div>
      <div class="column right">
          <div id="viewer"></div>
      </div>
    </div>

    <!-- The Viewer JS -->
    <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.6.*/viewer3D.js"></script>

    <!-- Developer JS -->
    <script>
      class PdfData {
          constructor( document ) {
            this.doc = document;
            this.pages = [];
          }

          parse() {
            const filter = {
              type:'geometry',
              role: '2d'
            };

            const doc = this.doc;
            const rootItem = doc.getRoot();
            const viewables = rootItem.search( filter );

            if( viewables.length === 0 ) {
              console.error( 'Document contains no viewables.' );
              return false;
            }

            const pages = viewables.map( v => {
              const files = v.search( { role: 'pdf-page' } );
              const file = files[0];

              if( !file ) return;
              const urn = file.data.urn;

              return {
                guid: v.guid(),
                raw: v,
                name: v.name(),
                urn,
                url: function() {
                  return Autodesk.Viewing.endpoint.getItemApi() + urn;
                }
              };
            });

            this.pages = pages;

            if( !pages || pages.length <= 0 )
              return false;

            return true;
          }
        }

        let viewer;
        const options = {
            env: 'AutodeskProduction',
            accessToken: 'YourAccessToken'
        };

        const documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXlidWNrZXQvRTE1MDEyX1RVRl9aMzkwTS1QUk9fR0FNSU5HX1dpLUZpX1VNX1YyX1dFQi5wZGY';
        Autodesk.Viewing.Initializer(options, function() {
          Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
        });

        function onDocumentLoadSuccess( doc ) {
          buildPdfPageList( doc );

          const container = document.getElementById( 'viewer' );
          viewer = new Autodesk.Viewing.GuiViewer3D( container );
          viewer.start();

          viewer.loadExtension( 'Autodesk.PDF' ).then( () => {
            const event = new Event( 'click' );
            const page = document.querySelector( '#pdf-pages-wrapper a' );
            page.dispatchEvent( event );
          });
        }

        function onDocumentLoadFailure(viewerErrorCode) {
          console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
        }

        function onLoadModelSuccess(model) {
          console.log( 'onLoadModelSuccess()!' );
          console.log( 'Validate model loaded: ' + ( viewer.model === model ) );
          console.log( model );
        }

        function onLoadModelError( viewerErrorCode ) {
            console.error( 'onLoadModelError() - errorCode:' + viewerErrorCode);
        }

        function buildPdfPageList( doc ) {
          const pdf = new PdfData( doc );
          pdf.parse();
          const pageWrapperContainer = document.getElementById( 'pdf-pages-wrapper' );
          const pagesContainer = document.createElement( 'ul' );
          pageWrapperContainer.appendChild( pagesContainer );

          for( let i=0; i < pdf.pages.length; i++ ){
            const page = pdf.pages[i];
            console.log( page );
            const pageHolder = document.createElement( 'li' );
            pagesContainer.appendChild( pageHolder );

            const pageItem = document.createElement( 'a' );
            pageHolder.appendChild( pageItem );

            pageItem.href = '#';
            pageItem.innerText = page.name;
            pageItem.addEventListener( 'click', ( e ) => {
              e.preventDefault();
              e.stopPropagation();

              document.querySelectorAll( '#pdf-pages-wrapper a' ).forEach( e => e.classList.remove( 'active' ) );
              e.target.classList.add( 'active' );

              viewer.tearDown();
              const url = page.url();

              console.log( page, url );
              viewer.loadModel( url, {page: 1}, onLoadModelSuccess, onLoadModelError );
            });
          }
        }
    </script>
  </body>
</html>

Autodesk Forge Viewer v7：打开 PDF

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-13 08:22:52

Autodesk Forge Viewer v7：打开 PDF

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-13 08:22:52

解决方案1
1 已采纳 2019-12-13 08:22:52