CSS 如何自定义 SharePoint 列表项的打印布局？

How do I customize the print layout of a SharePoint list item?

提问by just mike

i need to be able to produce a "pretty" printout of an individual list item's values, with the goals being:

我需要能够生成单个列表项值的“漂亮”打印输出，目标是：

• get rid of all navigation
• organize data as it would appear on a typical paper form (a customer requirement)

• 摆脱所有导航
• 组织数据，就像它出现在典型的纸质表格上一样（客户要求）

i'm avoiding using InfoPath at this time due to other issues (which i'll post separate questions for...)

由于其他问题，我此时避免使用 InfoPath（我将针对...发布单独的问题）

for example, i have an individual list item that normally displays similar to the following DispForm.aspxexample:

例如，我有一个单独的列表项，通常显示类似于以下DispForm.aspx示例：

i need a printed version (PrintForm.aspx??) that will display similar to the following example:

我需要一个打印版本 ( PrintForm.aspx??) 将显示类似于以下示例：

from what i can tell, i can't do this just by modifying/creating custom CSS.

据我所知，我不能仅仅通过修改/创建自定义 CSS 来做到这一点。

it also seems that i can't quite do this just by creating my own "print" version of DispForm.aspx.

似乎我不能仅仅通过创建我自己的“打印”版本来做到这一点DispForm.aspx。

any suggestions, ideas, links would be very helpful.

任何建议、想法、链接都会非常有帮助。

回答by mortenbpost

Creating a custom list form is probably what you want. Without the master page attached to it or anything.

创建自定义列表表单可能是您想要的。没有附加母版页或任何东西。

You can find a walkthrough here that will get you started:

您可以在此处找到可帮助您入门的演练：

http://office.microsoft.com/en-us/sharepointdesigner/HA101191111033.aspx

http://office.microsoft.com/en-us/sharepointdesigner/HA101191111033.aspx

Enjoy.

享受。

回答by just mike

@mortenbpost's link was just what i needed: Create a new page that contains a custom list form

@mortenbpost 的链接正是我所需要的： 创建一个包含自定义列表表单的新页面

specifically, here's what you need to do to get a "basic" custom page for a list item -- from which you can completely customize it with XHTML/CSS:

具体来说，这是为列表项获取“基本”自定义页面所需的操作——您可以从中使用 XHTML/CSS 对其进行完全自定义：

first

第一的

ensure your list has all the columns you'll need

确保您的列表包含您需要的所有列

second

第二

here's how to create a custom "view" page (virtually the same steps can be followed for a custom "new" or custom "edit" page):

以下是创建自定义“视图”页面的方法（自定义“新建”或自定义“编辑”页面几乎可以遵循相同的步骤）：

1. Open MS Office SharePoint Designer
2. File -> Open Site...
3. enter your web-site URL
4. Make sure the "Folder List" Task Pane is visible (Task Panes -> Folder List)
5. Expand the "Lists" folder
6. You should see entries like the following:

   Announcements
Calendar
   ...
   YOUR LIST NAME
   ...
   

7. Expand the entry with YOUR LIST NAME
8. You should see entries like the following

   Attachments
Items
AllItems.aspx
DispForm.aspx
EditForm.aspx
NewForm.aspx
   

9. Right-Click on YOUR LIST NAME
10. Select New-> ASPX
11. Re-name the file to something meaningful, like: PrintForm.aspx
12. Open PrintForm.aspx
13. View in "Split" mode
14. In the Code pane, you should see your insert-point inside a blank html form
15. Insert -> SharePoint Controls -> Custom List Form...
16. Select YOUR LIST NAMEfrom the first drop-down (List or document library to use for form)
17. Select "Item" from the second drop-down (Content type to use for form)
18. Select "Display item form (used to view list items)" (this is where you choose between view, new, edit)
19. Un-check "Show standard toolbar" when creating a printable form
20. Click OK
21. In the Design pane, you should see a basic table layout with labels on the left and values on the right
22. In the Code pane, you should see such code as the following for every Column in your list (this one's for a "Single line of text" column type):

    <tr>
        <td width="190px" valign="top" class="ms-formlabel">
            <H3 class="ms-standardheader">
                <nobr>Column name</nobr>
            </H3>
        </td>
        <td width="400px" valign="top" class="ms-formbody">
            <xsl:value-of select="@Column_x0020_name"/>
        </td>
    </tr>

23. You can now just take all those <xsl:value-of select="@Column_x0020_name"/>entries and do standard XHTML/CSS layout
24. To test, save your work
25. Then, in a web browser, navigate to your SharePoint web-site
26. Select an item you've already entered data for
27. Choose "View Item"
28. In the address bar, replace DispForm.aspxwith PrintForm.aspx

1. 打开 MS Office SharePoint Designer
2. 文件 -> 打开网站...
3. 输入您的网站网址
4. 确保“文件夹列表”任务窗格可见（任务窗格 -> 文件夹列表）
5. 展开“列表”文件夹
6. 您应该会看到如下所示的条目：

   Announcements
Calendar
   ...
   YOUR LIST NAME
   ...
   

7. 使用您的列表名称展开条目
8. 您应该会看到如下所示的条目

   Attachments
Items
AllItems.aspx
DispForm.aspx
EditForm.aspx
NewForm.aspx
   

9. 右键单击您的列表名称
10. 选择新建-> ASPX
11. 将文件重命名为有意义的名称，例如：PrintForm.aspx
12. 打开PrintForm.aspx
13. 在“拆分”模式下查看
14. 在代码窗格中，您应该在空白的 html 表单中看到您的插入点
15. 插入 -> SharePoint 控件 -> 自定义列表表单...
16. 从第一个下拉列表中选择您的列表名称（用于表单的列表或文档库）
17. 从第二个下拉列表中选择“项目”（用于表单的内容类型）
18. 选择“显示项目表单（用于查看列表项目）”（这是您在view、new、edit之间进行选择的地方）
19. 创建可打印表单时取消选中“显示标准工具栏”
20. 单击确定
21. 在“设计”窗格中，您应该会看到一个基本的表格布局，左边是标签，右边是值
22. 在“代码”窗格中，您应该看到列表中每一列的代码如下（此代码用于“单行文本”列类型）：

    <tr>
        <td width="190px" valign="top" class="ms-formlabel">
            <H3 class="ms-standardheader">
                <nobr>Column name</nobr>
            </H3>
        </td>
        <td width="400px" valign="top" class="ms-formbody">
            <xsl:value-of select="@Column_x0020_name"/>
        </td>
    </tr>

23. 您现在可以使用所有这些条目并进行标准的 XHTML/CSS 布局 <xsl:value-of select="@Column_x0020_name"/>
24. 要测试，请保存您的工作
25. 然后，在 Web 浏览器中，导航到您的 SharePoint 网站
26. 选择您已为其输入数据的项目
27. 选择“查看项目”
28. 在地址栏中，将DispForm.aspx替换为PrintForm.aspx

some things to keep in mind:

要记住的一些事情：

• spaces and punctuation characters make for annoying naming of Column name
• Column namein the code will have a maximum length of 32 -- any names longer will be truncated, e.g.:

  SharePoint Column name: this is a long name
  becomes in the code: this_x0020_is_x0020_a_x0020_long
  

• any Column namein the code that would be a duplicate will be length 32 plusa numeric suffix. so, given the above column also exists, we would then have e.g.:

  SharePoint Column name: this is a long name also
  becomes in the code: this_x0020_is_x0020_a_x0020_long0
  

• if you add columns or modify columns, you'll have to add them in by hand to this page (do the Insert -> SharePoint Controls -> Custom List Form...on another "dummy" page to get the naming right)

• 空格和标点符号使列名的命名变得烦人
• 代码中的列名最大长度为 32——任何更长的名称都将被截断，例如：

  SharePoint 列名：这是
  在代码中变成的长名称：this_x0020_is_x0020_a_x0020_long
  

• 代码中任何重复的列名称的长度为 32加上一个数字后缀。因此，鉴于上述列也存在，我们将有例如：

  SharePoint 列名：这是一个长名称
  ，在代码中也变成了：this_x0020_is_x0020_a_x0020_long0
  

• 如果添加列或修改列，则必须手动将它们添加到此页面（在另一个“虚拟”页面上执行“插入”->“SharePoint 控件”->“自定义列表表单...”以获得正确的命名）

again, i couldn't have done this without @mortenbpost's answer!

再一次，如果没有@mortenbpost 的回答，我不可能做到这一点！

回答by roryf

You could use CSS to hide all the navigation etc. that you don't need using a media="print"stylesheet, but you won't be able to make the exact changes to the layout you've illustrated.

您可以使用 CSS 来隐藏所有不需要使用media="print"样式表的导航等，但您将无法对已说明的布局进行精确更改。

If it doesn't have to be exactly like the example, it would be fairly trivial to hide all but the name->value table and just print that. If you really do need to merge fields and re-layout the table then you likely have to hack up the server-side.

如果它不必与示例完全一样，那么隐藏除 name->value 表之外的所有表并仅打印它是相当简单的。如果您确实需要合并字段并重新布置表格，那么您可能必须破解服务器端。

Why can't you create your own version of the page?

为什么不能创建自己的页面版本？

回答by roryf

Using Sharepoint Designer, you could create a custom aspx page that uses a dataview webpart to do this...

使用 Sharepoint Designer，您可以创建一个自定义 aspx 页面，该页面使用数据视图 webpart 来执行此操作...

回答by roryf

*****You can now just take all those entries and do standard XHTML/CSS layout *****

*****您现在可以使用所有这些条目并进行标准的 XHTML/CSS 布局 *****

can you expand this with an example on how to do it?

你能用一个例子来扩展这个吗？

回答by roryf

This isn't an answer so much as a note to the above.

这与其说是对上述问题的注解，不如说是一个答案。

Use a custom list form but keep in mind that if any of the columns have versioning turned on you will not be able to get at the "data" easily. For example if one of your colums is a Notes column and everytime someone edits the notes field a new version is appended then none of that is accessible as it's essentially a seperate "list." I'm stuck on this issue as I also have a client asking for a print out which "doesn't look like it's from SharePoint."

使用自定义列表表单，但请记住，如果任何列打开了版本控制，您将无法轻松获取“数据”。例如，如果您的一个列是“备注”列，并且每次有人编辑备注字段时都会附加一个新版本，那么这些都无法访问，因为它本质上是一个单独的“列表”。我被困在这个问题上，因为我还有一个客户要求打印“看起来不像来自 SharePoint”。

回答by Kwirk

Alternatively, you could export to a spreadsheet & print from there.

或者，您可以导出到电子表格并从那里打印。