百度開放雲 文檔轉碼服務

在上一篇文章中，咱們介紹瞭如何經過 bce-bos-uploader 來往 BOS 直傳文件，在這篇文章中，咱們主要介紹如何使用 百度開放雲的 文檔轉碼服務，方便的處理各類文檔格式，同時能夠獲取跨平臺的文檔預覽地址

百度開放雲的文檔轉碼服務是基於百度文庫轉碼服務的封裝，能夠支持各類常見的主流格式：doc, docx, ppt, pptx, xls, xlsx, vsd, pot, pps, rtf, wps, et, dps, pdf, txt, epub

安裝 bce-bos-uploader

咱們不直接使用 bce-sdk-js，由於默認狀況下，bce-sdk-js 只能支持現代瀏覽器，不過咱們在 bce-bos-uploader 裏面對於網絡交互的部分，進行了適配，所以能夠在比較低版本的IE下面運行。

bower install bce-bos-uploader

頁面中引用相關的資源

<!--[if lt IE 8]><script src="bower_components/json3/lib/json3.min.js"></script><![endif]-->
<!--[if lt IE 9]><script src="bower_components/js-polyfills/es5.js"></script><![endif]-->
<!--[if lt IE 10]><script src="bower_components/moxie/bin/js/moxie.min.js"></script><![endif]-->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bce-bos-uploader/bce-bos-uploader.bundle.min.js"></script>

默認配置

var AK = 'your ak';
var SK = 'your sk';
var DOC_ENDPOINT = 'http://doc.baidubce.com';
var BOS_ENDPOINT = 'https://bj.bcebos.com';
var BOS_BUCKET = 'your bucket';
var CHUNK_SIZE = '1m';

初始化 DocClient

var doc = new baidubce.sdk.DocClient.Document({
  endpoint: DOC_ENDPOINT,
  credentials: {ak: AK, sk: SK}
});

初始化 Uploader

在頁面中放置一個上傳控件：

<input type="file" id="file" />

而後初始化 bce-bos-uploader

var uploader = new baidubce.bos.Uploader({
  browse_button: '#file',
  multi_selection: true,
  bos_bucket: BOS_BUCKET,
  bos_endpoint: BOS_ENDPOINT,
  bos_ak: AK,
  bos_sk: SK,
  auto_start: true,
  max_file_size: '100m',
  accept: 'txt,pdf,doc,docx,ppt,pptx,xls,xlsx',
  flash_swf_url: 'bower_components/moxie/bin/flash/Moxie.swf',
  init: {
    FileUploaded: function (_, file, info) {
      // 調用 轉碼服務的接口，提交轉碼請求
      var bucket = BOS_BUCKET;
      var object = file.name;
      var title  = file.name;
      doc.createFromBos(bucket, object, title)
        .then(function (response) {
          console.log(response.body.documentId);
        });
    },
    Error: function (_, error, file) {
      // 處理錯誤
    }
  }
});

查看當前轉碼的文檔列表

提交了文檔轉碼請求以後，咱們能夠經過調用 doc.list() 接口獲取全部的文檔轉碼任務，若是某個任務的狀態是 PUBLISHED 了，那麼就能夠預覽文檔了：

doc.list().then(function (response) {
  console.log(response.body.documents);
});

獲取文檔預覽的播放器地址

若是某個轉碼任務的狀態是 PUBLISHED，那麼就能夠調用 doc.read(mediaId) 的接口獲取播放器的地址：

首選須要引入播放器的代碼

<script src="https://bce.bdstatic.com/doc/doc_reader.js"></script>
<div id="reader"></div>

調用doc.read()接口，而後初始化文檔播放器:

var documentId = 'ths PUBLISHED document id';
doc.read(documentId).then(function (response) {
  var doc = response.body;
  new Document('reader', {
    docId: doc.docId,
    token: doc.token,
    host: doc.host,
    width: 800
  });
});