使用nodeJs快速搭建IMM文檔預覽服務

本文将示範如何使用IMM快速搭建文檔預覽服務。

示範用到的所有資源region都建立到：華東1

準備工作

• 登入阿裡雲控制台
• 開通OSS、IMM服務
• 進入 OSS控制台 , 建立Bucket，存放待轉換文檔

• IMM控制台 ，建立IMM文檔轉換Project

将待轉換文檔上傳到Bucket

上傳檔案可以使用

OSS Bowser

工具，也可以使用OSS控制台上傳。

示範環境的待轉換文檔路徑為：

oss://preview-office-bucket/docs/input/demo.pptx           

示範環境的文檔轉換後存放路徑為：

oss://preview-office-bucket/docs/output/demo_pptx           

送出文檔轉換任務

• 建立使用者 ，并記錄下AK資訊，用于送出IMM文檔轉換任務和OSS臨時權限簽發。OSS臨時權限簽發是授權預覽引擎擷取OSS文檔的權限，在下一步生成預覽文檔url會用到。

• 給使用者添加STS和IMM的權限

• 建立nodeJs項目，安裝IMM SDK。

npm install @alicloud/pop-core --save           

• 送出文檔轉換任務：

const { RPCClient } = require('@alicloud/pop-core');

  // 填寫剛才建立使用者時記錄下的AK資訊
  const accessKeyId = 'LT******xR';
  const accessKeySecret = 'rB******QN';

  var client = new RPCClient({
    endpoint:'http://imm.cn-hangzhou.aliyuncs.com',
    accessKeyId: accessKeyId,
    accessKeySecret: accessKeySecret,
    apiVersion: '2017-09-06'
  });

  try{
    var params = {
      Project: "imm-server",
      SrcUri: "oss://preview-office-bucket/docs/input/demo.pptx",
      TgtType: "vector",
      TgtUri: "oss://preview-office-bucket/docs/output/demo_pptx"
    };
    var result = await client.request("createOfficeConversionTask", params);
    console.log(result);
  }catch(err){
    console.log(err);
  }           

執行代碼後，檢視output目錄是否生成目标檔案：

生成預覽文檔url

文檔轉換完成後，需要線上預覽，還需要完成以下步驟：

• 建立一個bucket，選擇公共讀，用于存放前端預覽引擎：

• 點選下載下傳 前端預覽引擎，解壓後，上傳到preview-index。

• 給存放文檔的bucket設定跨域通路，因為前端預覽引擎頁面會跨域擷取存放到preview-office-bucket的文檔内容

• 建立角色 ，添加OSS的權限，用于簽發OSS臨時權限。

const { RPCClient } = require('@alicloud/pop-core');

  const accountId = '1042201747765506';
  const roleArn = 'acs:ram::1042201747765506:role/ststest';
  const accessKeyId = 'LT******xR';
  const accessKeySecret = 'rB******QN';
  const region = "oss-cn-hangzhou";
  // 存放文檔的bucket
  const bucket = "preview-office-bucket";
  // 預覽引擎的通路位址
  const previewUrl = 'http://preview-index.oss-cn-hangzhou.aliyuncs.com/index.html';
  
  var client = new RPCClient({
    endpoint:'https://sts.aliyuncs.com',
    accessKeyId: accessKeyId,
    accessKeySecret: accessKeySecret,
    apiVersion: '2015-04-01'
  });

  try{
    var params = {
      // AssumeRole action
      Action: 'AssumeRole',
      // 有權限通路OSS的角色
      RoleArn: roleArn,
      // 此參數用來區分不同的Token，以标明誰在使用此Token，便于審計。格式：^[a-zA-Z0-9.@-_]+$，2-32個字元
      RoleSessionName: accountId,
      // 權限最小化，限制使用者隻能通路該文檔
      Policy: JSON.stringify({
        "Version": "1",
        "Statement": [
          {
            "Effect": "Allow",
            "Action": [
              "oss:GetObject"
            ],
            "Resource": [
              `acs:oss:*:${accountId}:${bucket}/docs/output/demo_pptx/*`
            ]
          }
        ]
      }),
      // 有效期
      DurationSeconds: 3600
    };
    var result = await client.request('AssumeRole', params);
    
    function parse(params){
      return Object.keys(params).map((key) => {
        return `${key}=${params[key]}`;
      }).join("&");
    }

    var params = {};
    // 預覽文檔位址
    params.url = `http://${bucket}.${region}.aliyuncs.com/docs/output/demo_pptx`;
    // 通路預覽文檔的accessKeyId
    params.accessKeyId = result.Credentials.AccessKeyId;
    // 通路預覽文檔的accessKeySecret
    params.accessKeySecret = result.Credentials.AccessKeySecret;
    // 通路預覽文檔的SecurityToken
    params.stsToken = encodeURIComponent(result.Credentials.SecurityToken);
    // 預覽文檔的region
    params.region = region;
    // 預覽文檔的bucket
    params.bucket = bucket;
    var url = `${previewUrl}?${parse(params)}`

    console.log(url);
  }catch(err){
    console.log(err);
  }            

執行成功後列印的url複制到浏覽器中，即可看到預覽效果：