Question

大家好，感谢您的帮助。我正在尝试使用CSS创建可打印页面，而不是使用其他技术（如PDF）创建页面。我需要能够在每个页面上显示页眉和页脚。此外，页面上有各种元素类型（表格，列表，段落），根据页面的不同，可能会显示也可能不显示。我已经看过一些文章，例如https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/，这似乎意味着打印质量可以通过CSS和HTML实现，但我似乎无法弄清楚这一点。

我不确定我是否可以通过HTML和CSS完成我需要的工作，或者我是否需要尝试别的东西。 HTML的后端是MVC。

这是一个示例

＆＃13;

@media screen {
  header.onlyprint,
  footer.onlyprint {
    display: none;
    /* Hide from screen */
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin-left: 0.5cm;
    margin-right: 0.5cm;
    margin-bottom: 1.5cm;
    background: #FFF;
  }
  @page {
    @top-left {
      margin: 10pt 0 10pt 10pt;
      border-top: .25pt solid #666;
      font-size: 9pt;
      color: #FFF;
    }
    @top-center {
      margin: 10pt 10pt 10pt 0;
      border-top: .25pt solid #666;
      font-size: 9pt;
      color: #FFF;
    }
    @top-right {
      margin: 10pt 10pt 10pt 0;
      border-top: .25pt solid #666;
      font-size: 9pt;
      color: #FFF;
    }
  }
  @page {
    @bottom-left {
      margin: 10pt 0 10pt 10pt;
      border-top: .25pt solid #666;
      font-size: 9pt;
      color: #FFF;
    }
    @bottom-center {
      margin: 10pt 10pt 10pt 0;
      border-top: .25pt solid #666;
      font-size: 9pt;
      color: #FFF;
    }
    @bottom-right {
      margin: 10pt 10pt 10pt 0;
      border-top: .25pt solid #666;
      font-size: 9pt;
      color: #FFF;
      content: "Page " counter(page) " of " counter(pages);
      /* Add if you need page numbers */
    }
  }
}

＆＃13;

<header class="onlyprint">
  <ul>
    <li>
      Dr. Who
    </li>
    <li>
      1234 Somewhere St.
    </li>
    <li>
      Anywhere, US 12345
    </li>
  </ul>
</header>
<div id="divmain" style="width:  760px;">

  <ul id="ulPatientDetails">
    <li>
      <label>Patient Name:</label>
      <span>TESTCASE, TOM</span>
    </li>
    <li>
      <label>MRNumber:</label>
      <span>999999</span>
    </li>
    <li>
      <label>Patient DOB:</label>
      <span>99/99/9999</span>
    </li>
  </ul>
  <table id="tblhistorian">
    <caption>Historian</caption>
    <tr>
      <th>Time Entered</th>
      <th>Historian</th>
      <th>Historian Name</th>
      <th>Other Persons</th>
      <th>Language</th>
      <th>Other Language</th>
      <th>Translator</th>
      <th>Entered By</th>
    </tr>
    <tr>
      <td>
        99/99/9999
      </td>
      <td>
        Mother
      </td>
      <td></td>
      <td></td>
      <td>
        English
      </td>
      <td></td>
      <td></td>
      <td>
        Dr. Who
      </td>
    </tr>
  </table>



  <ul id="ulPatientAllergies">
    <li>
      <label>Allergies:</label>
      <span>BLAH BLAH BLAH BLAH</span>
    </li>
  </ul>
  <table id="tblTobaccoUse">
    <caption>Tobacco Use</caption>
    <tr>
      <th>Patient Uses Tobacco</th>
      <th>Family Uses Tobacco</th>
      <th>Entered By</th>
      <th>Time Entered</th>
    </tr>
    <tr>
      <td>N/A</td>
      <td>No</td>
      <td>Someone</td>
      <td>99/99/9999</td>
    </tr>
  </table>

  <table id="outsidemedications">
    <caption>Active Prescriptions</caption>
    <tr>
      <th>Date</th>
      <th>Prescribed By</th>
      <th>Prescription</th>
      <th>SIG</th>
      <th>Route</th>
      <th>Dispense</th>
      <th>Refills</th>
    </tr>
    <tr>
      <td>
        99/99/9999
      </td>
      <td>
        DR. WHO
      </td>
      <td>
        BLAH BLAH BLAH BLAH
      </td>
      <td>
        BLAH BLAH BLAH BLAH
      </td>
      <td>

      </td>
      <td>

      </td>
      <td>
        0
      </td>
    </tr>
    <tr>
      <td>
        99/99/9999
      </td>
      <td>
        DR. WHO
      </td>
      <td>
        BLAH BLAH BLAH BLAH
      </td>
      <td>
        BLAH BLAH BLAH BLAH
      </td>
      <td>
        BLAH BLAH BLAH BLAH
      </td>
      <td>

      </td>
      <td>

      </td>
    </tr>
  </table>




  <table id="outsidemedications">
    <caption>Other Medications</caption>
    <tr>
      <th>Medication</th>
      <th>SIG</th>
      <th>Source</th>
      <th>Category</th>
      <th>Comments</th>
      <th>Entered By</th>
      <th>Date Entered</th>
    </tr>
    <tr>
      <td colspan="7">No current medications.</td>
    </tr>
  </table>




  <table id="tblChiefComplaints">
    <caption>Chief Complaints</caption>
    <tr>
      <th>Category</th>
      <th>Description</th>
      <th>Duration</th>
    </tr>
    <tr>
      <td>General</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>BLAH BLAH BLAH BLAH</td>
    </tr>
    <tr>
      <td>General</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>BLAH BLAH BLAH BLAH</td>
    </tr>
  </table>

  <table id="tblReviewOfSystems">
    <caption>Review of Systems</caption>
    <tr>
      <th>Category</th>
      <th>Symptom</th>
      <th>Result</th>
    </tr>
    <tr>
      <td>General</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Skin</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Eyes</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Ears</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Nose</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Mouth or Teeth</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Face or Neck</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Respiratory</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Cardio</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Abdomen</td>
      <td>BLAH BLAH BLAH BLAH </td>
      <td>None</td>
    </tr>
    <tr>
      <td>MSLymph</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Neuro</td>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>None</td>
    </tr>
  </table>

  <table id="tblPesentIllnesses">
    <caption>History of Present Illnesses</caption>
    <tr>
      <th>Complaint</th>
      <th>Entered By</th>
      <th>Time Entered</th>
    </tr>
    <tr>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>Dr. Who</td>
      <td>99/99/9999</td>
    </tr>
    <tr>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>Dr. Who</td>
      <td>99/99/9999</td>
    </tr>
    <tr>
      <td>BLAH BLAH BLAH BLAH</td>
      <td>Dr. Who</td>
      <td>99/99/9999</td>
    </tr>
  </table>

  <table id="tblFamilyIllnesses">
    <caption>Family History</caption>
    <tr>
      <th>Relationship</th>
      <th>Name</th>
      <th>DOB</th>
      <th>Age</th>
      <th>Illness</th>
    </tr>
  </table>

  <table id="tblWellChildHistory">
    <caption>Well Child History</caption>
    <tr>
      <th>Dietary History</th>
      <th>Physical Activity</th>
      <th>Sleeping Habits</th>
      <th>Bowel Habits</th>
      <th>Dental Visit In Past Year</th>
      <th>Exposure To Illnesses</th>
      <th>Alcohol Use</th>
      <th>Drug Use</th>
      <th>Travel History</th>
      <th>Sexual Activity</th>
      <th>Entered By</th>
      <th>Time Entered</th>
    </tr>
    <tr>
      <td colspan="3">No past medical history.</td>
    </tr>
  </table>

  <table id="tblSocialHistory">
    <caption>Social History</caption>
    <tr>
      <th>Primary Caregiver</th>
      <th>Home Status</th>
      <th>Child Attends</th>
      <th>School Name</th>
      <th>Grade</th>
      <th>School Performance</th>
      <th>Entered By</th>
      <th>Time Entered</th>
    </tr>
    <tr>
      <td colspan="12">No social history enteredvisit.</td>
    </tr>
  </table>


  <table id="tblDevelopmentalMilestones">
    <caption>Developmental Milestones</caption>
    <tr>
      <th>Category</th>
      <th>Question</th>
      <th>Answer</th>
      <th>Entered By</th>
      <th>TimeEntered</th>
    </tr>
    <tr>
      <td colspan="3">No developmental assessment entered.</td>
    </tr>
  </table>

  <table id="tblDevelopmentalComments">
    <caption>Developmental Comments</caption>
    <tr>
      <th>Comment</th>
      <th>Entered By</th>
      <th>TimeEntered</th>
    </tr>
    <tr>
      <td colspan="3">No developmental comments entered.</td>
    </tr>
  </table>

  <table id="tblHouseholdRiskFactorResponses">
    <caption>Household Risk Factors</caption>
    <tr>
      <th>Question</th>
      <th>Response</th>
      <th>Comment</th>
    </tr>
    <tr>
      <td colspan="3">No household risk factors entered visit.</td>
    </tr>
  </table>
  <table id="tblFamilyBarriersResponses">
    <caption>Family Barriers</caption>
    <tr>
      <th>Question</th>
      <th>Response</th>
      <th>Comment</th>
    </tr>
    <tr>
      <td colspan="3">No household risk factors entered visit.</td>
    </tr>
  </table>

  <table id="tblPHQAAssessments">
    <caption>PHQ-A Assessment</caption>
    <tr>
      <th>Question</th>
      <th>Response</th>
      <th>Score</th>
    </tr>
    <tr>
      <td colspan="3">No current assessments.</td>
    </tr>
  </table>


  <table id="tblPatientVitals">
    <caption>Vitals</caption>
    <tr>
      <th>Time Entered</th>
      <th>Temp.</th>
      <th>H.R.</th>
      <th>R.R.</th>
      <th>Weight</th>
      <th>Height</th>
      <th>BMI</th>
      <th>Head Circ.</th>
      <th>O2 Sat.</th>
      <th>BP</th>
      <th>Comments</th>
      <th>Entered By</th>
    </tr>
    <tr>
      <td>11/3/2017 2:51:00 PM</td>
      <td>98.6</td>
      <td>90</td>
      <td>25</td>
      <td>58.0000</td>
      <td>0.0000</td>
      <td></td>
      <td>0.0000</td>
      <td>0.0000</td>
      <td>0/0&nbsp;Sitting&nbsp;Sitting</td>
      <td></td>
      <td>Dr. Who</td>
    </tr>
  </table>


  <ul id="ulexamdetails">
    <li id="liphysicalexamheader">Physical Exam</li>
    <li><span class="categorylabel">General</span></li>
    <li><span class="spnormal">BLAH BLAH BLAH BLAH</span><span class="spexception">&nbsp;Except:&nbsp;BLAH BLAH BLAH BLAH</span></li>
    <li><span class="categorylabel">Skin</span></li>
    <li><span class="spnormal">BLAH BLAH BLAH BLAH</span></li>
    <li><span class="categorylabel">Head</span></li>
    <li><span class="spnormal">BLAH BLAH BLAH BLAH</span></li>
    <li><span class="categorylabel">Eyes</span></li>
    <li><span class="spnormal">BLAH BLAH BLAH BLAH</span></li>
    <li><span class="categorylabel">Ears</span></li>
    <li><span class="spnormal">BLAH BLAH BLAH BLAH</span></li>
    <li><span class="categorylabel">Nose</span></li>
    <li><span class="spnormal">BLAH BLAH BLAH BLAH</span></li>
    <li><span class="categorylabel">Mouth</span></li>
    <li><span class="spnormal">BLAH BLAH BLAH BLAH</span><span class="spexception">&nbsp;Except:&nbsp;BLAH BLAH BLAH BLAH</span></li>
    <li><span class="categorylabel">Face Or Neck</span></li>
    <li><span class="spnormal">BLAH BLAH BLAH BLAH</span></li>
    <li><span class="categorylabel">Respiratory</span></li>
    <li><span class="spnormal"></span></li>
    <li><span class="categorylabel">Cardio</span></li>
    <li>
      <span class="spnormal">BLAH BLAH BLAH BLAH
                </span>
    </li>
    <li><span class="categorylabel">Abdomen</span></li>
    <li>
      <span class="spnormal">BLAH BLAH BLAH BLAH
                </span>
    </li>
    <li><span class="categorylabel">MS/Lymph</span></li>
    <li><span class="spnormal">BLAH BLAH BLAH BLAH</span></li>
    <li><span class="categorylabel">Neuro</span></li>
    <li><span class="spnormal">BLAH BLAH BLAH BLAH</span></li>

  </ul>

  <table id="tblVisionResults">
    <caption>Vision Results</caption>
    <tr>
      <th>Left Eye</th>
      <th>Right Eye</th>
      <th>Entered By</th>
      <th>Time Entered</th>
    </tr>
    <tr>
      <td colspan="4">No vision results this visit.</td>
    </tr>
  </table>
  <table id="tblHearingTestResults">
    <caption>Hearing Results</caption>
    <tr>
      <th>Frequency</th>
      <th>Db Right</th>
      <th>Db Left</th>
      <!--
                <th>Entered By</th>
                <th>Time Entered</th>
                    -->
    </tr>
    <tr>
      <td colspan="4">No hearing results this visit.</td>
    </tr>
  </table>
  <table id="tblInhouseLabs">
    <caption>In-house Labs</caption>
    <tr>
      <th>Lab</th>
      <th>Lab Value</th>
      <th>Comment</th>
      <th>Entered By</th>
      <th>Time Entered</th>
    </tr>
    <tr>
      <td colspan="4">No in-house labs results this visit.</td>
    </tr>
  </table>
  <table id="tblInhouseUrineResults">
    <caption>In-house Urine Results</caption>
    <tr>
      <th>Leukocytes</th>
      <th>Nitrite</th>
      <th>Urobili</th>
      <th>Protein</th>
      <th>PH</th>
      <th>Blood</th>
      <th>SG</th>
      <th>Ketone</th>
      <th>Bilirubin</th>
      <th>Glucose</th>
      <th>Entered By</th>
      <th>Time Entered</th>
    </tr>
    <tr>
      <td colspan="12">No urine results this visit.</td>
    </tr>
  </table>


  <table id="tblInOfficeCourse">
    <caption>Assessment</caption>
    <tr>
      <th>In-Office Course</th>
      <th>Entered By</th>
      <th>Time Entered</th>
    </tr>
    <tr>
      <td colspan="3">No in-office course.</td>
    </tr>
  </table>
  <fieldset id="fldassessment">
    <legend>Assessment</legend>
    <table id="tbldiagnosiscodes" name="tbldiagnosiscodes"></table>
    <table id="tblPatientAssessment">
      <caption>Assessment</caption>
      <tr>
        <th>Assessment</th>
        <th>Entered By</th>
        <th>Time Entered</th>
      </tr>
      <tr>
        <td>BLAH BLAH BLAH BLAH</td>
        <td>Dr. Who</td>
        <td>99/99/9999</td>

      </tr>
    </table>

    <table id="tblComplianced">
      <caption>Compliance</caption>
      <tr>
        <th>Compliance</th>
        <th>Compliance Code</th>
        <th>Entered By</th>
        <th>Time Entered By</th>
      </tr>
      <tr>
        <td colspan="4">No Compliance Entered This Visit.</td>
      </tr>
    </table>
  </fieldset>
  <fieldset id="fldplanofcare">
    <legend>Plan of Care</legend>

    <table id="tblDiagnosisCodes">
      <caption>Diagnosis Codes</caption>
      <tr>
        <th>Code</th>
        <th>Description</th>
      </tr>
      <tr>
        <td colspan="2">No Diagnosis Codes Entered</td>
      </tr>
    </table>

    <table id="tblCPTCodes">
      <caption>CPT Codes</caption>
      <tr>
        <th>Code</th>
        <th>Description</th>
      </tr>
      <tr>
        <td>
          99213
        </td>
        <td>
          ESTAB. EXPANDED
        </td>
      </tr>
    </table>

    <table id="tblPrescriptionsThisVisit">
      <caption>Prescriptions This Visit</caption>
      <tr>
        <th>Date</th>
        <th>Prescribed By</th>
        <th>Prescription</th>
        <th>SIG</th>
        <th>Route</th>
        <th>Dispense</th>
        <th>Refills</th>
      </tr>
      <tr>
        <td>
          99/99/9999
        </td>
        <td>
          Dr. Who
        </td>
        <td>
          BLAH BLAH BLAH BLAH
        </td>
        <td>
          BLAH BLAH BLAH BLAH
        </td>
        <td>

        </td>
        <td>

        </td>
        <td>
          0
        </td>
      </tr>
    </table>





    <table id="tblLabsOrdered">
      <caption>Labs Ordered This Visit</caption>
      <tr>
        <th>Date</th>
        <th>Test Ordered</th>
        <th>Ordered By</th>
        <th>Order Urgency</th>
      </tr>
      <tr>
        <td colspan="4">No Labs Ordered This Visit.</td>
      </tr>
    </table>


    <table id="outsidemedications">
      <caption>Radiology Orders This Visit</caption>
      <tr>
        <th>Date</th>
        <th>Test Ordered</th>
        <th>Ordered By</th>
        <th>Order Urgency</th>
      </tr>
      <tr>
        <td colspan="4">No Radiology Ordered This Visit.</td>
      </tr>
    </table>


    <table id="tblcptcodes" name="tblcptcodes"></table>
    <table id="tblReferrals">
      <caption>Referrals This Visit</caption>
      <tr>
        <th>Speciality</th>
        <th>Speciality Group</th>
        <th>Specialist</th>
      </tr>
      <tr>
        <td colspan="4">No Referrals This Visit.</td>
      </tr>
    </table>


    <div id="divplanofcare">
      <ul id="ulcareplanlist">
        <li>BLAH BLAH BLAH BLAH</li>
      </ul>
    </div>

  </fieldset>
</div>
<!--End of body-->
<footer class="onlyprint">
  <ul>
    <li>Tom Testcase</li>
    <li>99/99/9999</li>
  </ul>
</footer>

＆＃13;

可打印的CSS页面

0 个答案: