【问题标题】:Autodesk Forge Viewer v7: Open PDFsAutodesk Forge Viewer v7:打开 PDF
【发布时间】:2020-04-06 05:15:15
【问题描述】:

我对 Viewer v7 有一些问题,但在 API 参考教程中找不到任何答案。

我想做的事: 我想使用 Forge Datamanagment API 将 PDF 上传到 Forge,然后通过查看器打开它

到目前为止我所做的事情: 我设法将 PDF 文件上传到 Forge 并将其翻译成 SVF。

但是,到目前为止,当我想使用查看器打开 PDF 时,我只是得到一个空白页。我关注了这个tutorial,另外我添加了扩展名Autodesk.PDF。所以这就是我的代码的样子:

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);
}

对于 IFC 文件,这可以正常工作,但不适用于 PDF 文件。

我看过一些使用 loadModel 函数的教程,该函数将 URL 作为输入,无需翻译即可打开 PDF 文件。

所以这是我的问题:

  • 我什至需要翻译我的 PDF 文件才能在查看器中打开它吗?
  • 为什么查看器对 IFC 文件有效,但对 PDF 文件无效,尽管转换为 SVF 成功?
  • 我能否将 loadModel 函数也与 URN 一起使用(因此 base64 结束编码的 objectId)?

提前致谢

【问题讨论】:

    标签: autodesk-forge autodesk-viewer


    【解决方案1】:

    Q1:我什至需要翻译我的 PDF 文件才能在查看器中打开它吗?

    A1:是的!根据 Forge Viewer 的使用条款,Autodesk Forge Viewer 只能用于查看 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:为什么查看器对 IFC 文件有效,但对 PDF 文件无效,尽管转换为 SVF 成功?

    A2:请提供来自GET:urn/manifest的错误信息

    Q3:我可以将 loadModel 函数也与 URN 一起使用(因此 base64 endcoded objectId)吗?

    A3:是的,如果我理解正确的话。这是代码 sn-p 和截屏视频: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>
    

    【讨论】:

    • 你好伊森!感谢您的回复。我在 GET:urn/manifest 上没有收到错误。上传和翻译工作正常。当我使用您的代码时,我在浏览器的控制台中收到一个空白页面和以下警告:警告:无效流:“FormatError:Flate 流中的错误 FCHECK:120、194”
    • 嗨 Andreas,您能否考虑提供一个非机密的可重现案例,其中包含一个最低限度的完整但可运行的代码项目和 PDF 文件,以便我们通过电子邮件发送至 forge[DOT]help[AT]autodesk[DOT ]com?
    • 嗨。事实证明,我们在上传时遇到了另一个问题。不知何故,文件被损坏了,但翻译似乎对文件没有问题。但是,现在它工作正常。谢谢你的帮助。由于您的回答对于原始问题完全正确,因此我将其标记为已接受。干杯
    猜你喜欢
    • 2020-05-06
    • 2020-10-30
    • 2021-06-20
    • 2020-03-09
    • 2017-11-29
    • 2021-01-31
    • 2022-01-13
    • 2020-05-26
    • 2021-05-13
    相关资源
    最近更新 更多