SharePoint サイトで、PDF ビューアー

こんばんは、奥田です。

昨日今日は弊社トレーニングルームにて 「SharePoint ユーザーのための SharePoint Designer 2007 入門」コースを実施させていただきました。

受講いただいた方から、PDF を開かなくても確認できるよう、下記のような動きを作りたいとご質問をいただき、実際に作ってみたのでご紹介します。

 

<やりたいこと>

・ライブラリ内に PDF ファイルを保存

PDF 確認用のページを作成し、ライブラリ内に保存した PDF ファイルの一覧を表示する

   PDF 一覧から特定のファイルをクリックすると、同じページ内で PDF ファイルの内容が確認できる

 

<完成例>

 

<作り方>

Step 1:ライブラリ作成

サイト内に PDF ファイル保存用のドキュメントライブラリを作成します。

カテゴリ分けなど行いたい場合は、カテゴリ列を作成しておきます。

 

Step 2SPD でページ作成し、データビューとインラインフレームコントロール配置

PDF ファイル確認用のページを作成します。

ページ作成後、データビューとインラインフレームコントロールをページ内に配置します。

 

1.      SPD でサイトを開く

2.      マスタページから新規作成で、新しくページを作成し、サイト内の任意の場所に保存する

3.      作成したページのコンテンツエリア内に、データビューを配置する

データソース

PDF 保存用に作成したライブラリを選択

表示する内容

名前 など任意の列を選択し、複数アイテムビューとして表示

 

4.      グループ化やスタイル変更など任意にデータビューの設定を行う

5.      ページのコンテンツエリア内に [ツールボックス] から [インラインフレーム] を配置し、サイズ調整などを行う

 

  <ここまでで画面のようになります>

 

Step 3:データビューの XSLT を編集し、javascript を組み込む

データビュー内の XSLT を編集し、ファイル名をクリックすると、ファイルパスを iframe src プロパティに設定するよう javascript を記述します。

 

1.      編集画面を [分割] に切り替えておく

2.      インラインフレーム の id 属性を “viewer” と変更します。

3.      デザインビューで、データビュー内に表示されているファイル名をクリックし、コードビューで下記ソースコードを見つける

<xsl:value-of select="@FileLeafRef"/>

 

4.      3 の手順で見つけたコードを、下記コードと差し替える

<a href="javascript:void(0);">

<xsl:attribute  name="onclick">
javascript:document.getElementById(‘viewer’).setAttribute(‘src’,'<xsl:value-of select="@FileRef"/>’)</xsl:attribute>

<xsl:value-of select="@FileLeafRef" /></a>

 

5.   ページを上書き保存する 

 

完成♪

 

※ 注意点

PDF ファイルをインラインフレーム内に表示するためには、PDF Reader がクライアントにインストールされていて、インターネットからダウンロードした PDF ファイルをブラウザで開くように設定されている必要があります。

Adobe Reader だと、[ツール] メニュー – [環境設定] を開いて、 [インターネット] 分類で [PDF をブラウザに表示] をオンにする

 

奥田理恵

 

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中